#wdi-ux-page{
  --font:var(--font-figtree),system-ui,-apple-system,sans-serif;
  --mono:var(--font-space-grotesk),ui-monospace,monospace;
  background:#fff;
  color:#0B0C0E;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#wdi-ux-page,#wdi-ux-page *{box-sizing:border-box;}
#wdi-ux-page{background:#fff;color:#0B0C0E;}

/* ============================================================
   WDI — Key Outcomes  (standalone variants page)
   Reuses the established WDI system: rose accent, near-white,
   Google Sans / Figtree, AI mesh-glow language.
   ============================================================ */
#wdi-ux-page {
  --rose-700: #C40F46;
  --rose-600: #E41252;
  --rose-500: #F92F64;
  --rose-400: #FD3B6F;
  --rose-300: #FF6F92;

  --ink:    #0B0C0E;
  --ink-2:  #41454C;
  --muted:  #717680;
  --faint:  #9AA0A8;

  --bg:     #FFFFFF;
  --bg-2:   #FBFBFC;
  --line:   #ECEDF0;
  --line-2: #E3E4E8;
  --rose-soft: rgba(249, 47, 100, 0.10);

  --font: "Google Sans Flex", "Google Sans", "Product Sans", var(--font-figtree), system-ui, -apple-system, sans-serif;
  --maxw: 1240px;
}
#wdi-ux-page * { margin: 0; padding: 0; box-sizing: border-box; }
#wdi-ux-page { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#wdi-ux-page { font-family: var(--font); color: var(--ink); background: var(--bg); overflow-x:clip; }
#wdi-ux-page .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* ---- shared section header ---- */
#wdi-ux-page .sec-head { max-width: 820px; }
#wdi-ux-page .eyebrow-2 {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rose-600);
}
#wdi-ux-page .eyebrow-2::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: linear-gradient(135deg, var(--rose-600), var(--rose-400));
  box-shadow: 0 0 10px rgba(249,47,100,.5);
}
#wdi-ux-page .sec-h {
  margin-top: 20px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08;
  font-weight: 500; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance;
}
#wdi-ux-page .sec-sub {
  margin-top: 18px; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6;
  font-weight: 300; color: var(--ink-2); text-wrap: pretty;
}
#wdi-ux-page .sec-seo {
  margin-top: 14px; font-size: 14.5px; line-height: 1.65; font-weight: 400;
  color: var(--muted); max-width: 74ch;
}

/* ---- variant label chip (page scaffolding only) ---- */
#wdi-ux-page .variant-tag {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 40px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--muted);
}
#wdi-ux-page .variant-tag b { color: var(--ink); font-weight: 600; }
#wdi-ux-page .variant-tag .pill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--ink); border-radius: 999px; padding: 4px 10px;
}

/* ============================================================
   AI GLOW ELEMENT  (used wherever AI is featured)
   ============================================================ */
#wdi-ux-page .ai-word {
  background: linear-gradient(100deg, var(--rose-600), #7A00FF 45%, #00B8D4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600;
  text-shadow: 0 0 18px rgba(122,0,255,.18);
}
#wdi-ux-page .ai-aura {
  position: absolute; inset: -45%;
  background: conic-gradient(from 0deg, #F92F64, #7A00FF, #00E5FF, #FFB300, #F92F64);
  filter: blur(46px);
  opacity: .0;
  z-index: 0;
  pointer-events: none;
  animation: aispin 9s linear infinite;
  transition: opacity .5s ease;
}
@keyframes aispin { to { transform: rotate(360deg); } }

/* ============================================================
   SECTION SHELL + AMBIENT BACKGROUND ANIMATION
   ============================================================ */
#wdi-ux-page .outcomes { position: relative; padding: 100px 0 112px; overflow: hidden; }
#wdi-ux-page .outcomes--a { background: #0A0B0D; color: #fff; }
#wdi-ux-page .outcomes--b { background: var(--bg-2); border-top: 1px solid var(--line); }

/* drifting ambient orbs */
#wdi-ux-page .amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#wdi-ux-page .amb span { position: absolute; border-radius: 50%; filter: blur(80px); }
#wdi-ux-page .outcomes--a .amb span.o1 { width: 520px; height: 520px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(249,47,100,.30), transparent 65%); animation: drift1 19s ease-in-out infinite alternate; }
#wdi-ux-page .outcomes--a .amb span.o2 { width: 460px; height: 460px; bottom: -200px; left: -120px; background: radial-gradient(circle, rgba(122,0,255,.24), transparent 65%); animation: drift2 23s ease-in-out infinite alternate; }
#wdi-ux-page .outcomes--b .amb span.o1 { width: 560px; height: 560px; top: -220px; right: -160px; background: radial-gradient(circle, rgba(249,47,100,.10), transparent 65%); animation: drift1 21s ease-in-out infinite alternate; }
#wdi-ux-page .outcomes--b .amb span.o2 { width: 480px; height: 480px; bottom: -220px; left: -140px; background: radial-gradient(circle, rgba(0,184,212,.08), transparent 65%); animation: drift2 25s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-60px, 50px); } }
@keyframes drift2 { to { transform: translate(50px, -44px); } }

#wdi-ux-page .outcomes .wrap { position: relative; z-index: 2; }
#wdi-ux-page .outcomes--a .eyebrow-2 { color: var(--rose-300); }
#wdi-ux-page .outcomes--a .sec-h { color: #fff; }
#wdi-ux-page .outcomes--a .sec-sub { color: rgba(255,255,255,.78); }
#wdi-ux-page .outcomes--a .sec-seo { color: rgba(255,255,255,.55); }

/* ============================================================
   VARIANT A — HORIZONTAL EXPANDING CARDS
   ============================================================ */
#wdi-ux-page .oa-row {
  margin-top: 54px;
  display: flex;
  gap: 14px;
  height: 460px;
}
#wdi-ux-page .oa-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  cursor: pointer;
  transition: flex-grow .6s cubic-bezier(.2,.7,.2,1), background .5s ease, border-color .5s ease;
}
#wdi-ux-page .oa-panel.active {
  flex-grow: 5.4;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
#wdi-ux-page .oa-panel.is-ai.active { border-color: rgba(170,90,255,.4); }
#wdi-ux-page .oa-panel .ai-aura { opacity: 0; }
#wdi-ux-page .oa-panel.is-ai.active .ai-aura { opacity: .28; }

#wdi-ux-page .oa-inner { position: relative; z-index: 2; height: 100%; }

/* collapsed rail */
#wdi-ux-page .oa-rail {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 0;
  opacity: 1;
  transition: opacity .35s ease;
}
#wdi-ux-page .oa-panel.active .oa-rail { opacity: 0; pointer-events: none; }
#wdi-ux-page .oa-num {
  font-size: 16px; font-weight: 500; color: rgba(255,255,255,.5);
  font-feature-settings: "tnum" 1;
}
#wdi-ux-page .oa-ico { color: var(--rose-300); margin-top: 18px; }
#wdi-ux-page .oa-ico svg { width: 26px; height: 26px; display: block; }
#wdi-ux-page .oa-vtitle {
  margin-top: auto;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255,255,255,.82); white-space: nowrap;
}

/* expanded content */
#wdi-ux-page .oa-full {
  position: relative;
  height: 100%;
  padding: 34px 38px;
  display: flex; flex-direction: column;
  min-width: 440px;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .5s ease .12s, transform .55s cubic-bezier(.2,.7,.2,1) .12s;
}
#wdi-ux-page .oa-panel.active .oa-full { opacity: 1; transform: none; }
#wdi-ux-page .oa-full-top { display: flex; align-items: center; justify-content: space-between; }
#wdi-ux-page .oa-num--lg { font-size: 22px; color: rgba(255,255,255,.45); }
#wdi-ux-page .oa-ico--lg { color: var(--rose-300); margin: 0; }
#wdi-ux-page .oa-ico--lg svg { width: 32px; height: 32px; }
#wdi-ux-page .oa-title {
  margin-top: 26px; font-size: 27px; font-weight: 500; letter-spacing: -0.025em;
  line-height: 1.08; color: #fff; max-width: 18ch;
}
#wdi-ux-page .oa-short {
  margin-top: 14px; font-size: 16px; font-weight: 500; line-height: 1.45;
  color: rgba(255,255,255,.9); max-width: 40ch; letter-spacing: -0.01em;
}
#wdi-ux-page .oa-desc {
  margin-top: 12px; font-size: 14px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,.66); max-width: 46ch;
}
#wdi-ux-page .oa-rel { margin-top: auto; padding-top: 22px; }
#wdi-ux-page .oa-rel-label {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rose-300); margin-bottom: 8px;
}
#wdi-ux-page .oa-rel-text {
  font-size: 13.5px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,.74);
}

/* ============================================================
   VARIANT B — GOOGLE-STYLE GRID + SCROLL REVEAL
   ============================================================ */
#wdi-ux-page .ob-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
#wdi-ux-page .ob-card {
  position: relative;
  border-radius: 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  /* scroll reveal: transform-only so it never resolves to invisible */
  transform: translateY(26px);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
#wdi-ux-page #variant-b.in .ob-card { transform: none; transition-delay: var(--d); }
#wdi-ux-page .ob-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(249,47,100,.08), transparent 60%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
#wdi-ux-page .ob-card:hover { border-color: var(--rose-300); box-shadow: 0 20px 54px rgba(11,12,14,.10); }
#wdi-ux-page .ob-card:hover::after { opacity: 1; }

#wdi-ux-page .ob-face { position: relative; z-index: 2; padding: 34px 34px 32px; background: var(--bg); border-radius: inherit; height: 100%; }
#wdi-ux-page .ob-card.is-ai .ai-aura { opacity: 0; }
#wdi-ux-page .ob-card.is-ai:hover .ai-aura { opacity: .22; }
#wdi-ux-page .ob-card.is-ai .ob-face { margin: 1px; padding: 33px; }
#wdi-ux-page .ob-card.is-ai { border-color: transparent; }

#wdi-ux-page .ob-top { display: flex; align-items: center; justify-content: space-between; }
#wdi-ux-page .ob-ico {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px;
  background: var(--rose-soft); color: var(--rose-600);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
#wdi-ux-page .ob-ico svg { width: 26px; height: 26px; }
#wdi-ux-page .ob-card:hover .ob-ico { background: linear-gradient(135deg, var(--rose-600), var(--rose-400)); color: #fff; transform: scale(1.05); }
#wdi-ux-page .ob-card.is-ai .ob-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); color: #fff; }
#wdi-ux-page .ob-num {
  font-size: 34px; font-weight: 300; letter-spacing: -0.04em; color: #DDE0E5;
  font-feature-settings: "tnum" 1;
}
#wdi-ux-page .ob-card.is-ai .ob-num {
  background: linear-gradient(135deg, var(--rose-500), #7A00FF); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#wdi-ux-page .ob-title {
  margin-top: 24px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.12; color: var(--ink); text-wrap: balance;
}
#wdi-ux-page .ob-short {
  margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.45;
  letter-spacing: -0.01em; color: var(--ink-2);
}
#wdi-ux-page .ob-desc {
  margin-top: 12px; font-size: 14px; font-weight: 300; line-height: 1.62; color: var(--muted);
}
#wdi-ux-page .ob-rel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
#wdi-ux-page .ob-rel-label {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rose-600); margin-bottom: 7px;
}
#wdi-ux-page .ob-rel-text { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }

/* ============================================================
   VARIANT C — PREMIUM BENTO GRID (asymmetric tiles)
   ============================================================ */
#wdi-ux-page .oc-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
#wdi-ux-page .oc-card {
  position: relative;
  grid-column: span 2;
  border-radius: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  /* scroll reveal: transform-only */
  transform: translateY(28px);
  transition: transform .85s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
#wdi-ux-page #variant-c.in .oc-card { transform: none; transition-delay: var(--d); }
#wdi-ux-page .oc-card.w2 { grid-column: span 2; }
#wdi-ux-page .oc-card.w3 { grid-column: span 3; }
#wdi-ux-page .oc-card.w4 { grid-column: span 4; }

#wdi-ux-page .oc-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(249,47,100,.08), transparent 60%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
#wdi-ux-page .oc-card:hover { border-color: var(--rose-300); box-shadow: 0 20px 54px rgba(11,12,14,.10); transform: translateY(-3px); }
#wdi-ux-page #variant-c.in .oc-card:hover { transform: translateY(-3px); }
#wdi-ux-page .oc-card:hover::after { opacity: 1; }

#wdi-ux-page .oc-face { position: relative; z-index: 2; padding: 30px 30px 28px; height: 100%; display: flex; flex-direction: column; }
#wdi-ux-page .oc-top { display: flex; align-items: center; justify-content: space-between; }
#wdi-ux-page .oc-ico {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  background: var(--rose-soft); color: var(--rose-600);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
#wdi-ux-page .oc-ico svg { width: 24px; height: 24px; }
#wdi-ux-page .oc-card:hover .oc-ico { background: linear-gradient(135deg, var(--rose-600), var(--rose-400)); color: #fff; transform: scale(1.05); }
#wdi-ux-page .oc-num { font-size: 30px; font-weight: 300; letter-spacing: -0.04em; color: #DDE0E5; font-feature-settings: "tnum" 1; }
#wdi-ux-page .oc-title { margin-top: 22px; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
#wdi-ux-page .oc-short { margin-top: 11px; font-size: 14.5px; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); }
#wdi-ux-page .oc-desc { margin-top: 11px; font-size: 13.6px; font-weight: 300; line-height: 1.6; color: var(--muted); }
#wdi-ux-page .oc-rel { margin-top: auto; padding-top: 18px; }
#wdi-ux-page .oc-rel-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-600); margin-bottom: 7px; }
#wdi-ux-page .oc-rel-text { font-size: 12.8px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }

/* wide tiles: two-column horizontal layout */
#wdi-ux-page .oc-face--wide { flex-direction: row; gap: 34px; align-items: stretch; }
#wdi-ux-page .oc-face--wide .oc-wide-l { flex: 0 0 42%; display: flex; flex-direction: column; justify-content: center; }
#wdi-ux-page .oc-face--wide .oc-wide-l .oc-short { margin-top: 12px; }
#wdi-ux-page .oc-face--wide .oc-wide-r { flex: 1; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); padding-left: 30px; }
#wdi-ux-page .oc-face--wide .oc-rel { margin-top: 16px; }

/* AI featured tile — dark with ambient aura */
#wdi-ux-page .oc-card.is-ai {
  background: #0A0B0D;
  border-color: #17191e;
}
#wdi-ux-page .oc-card.is-ai .oc-face--wide .oc-wide-r { border-left-color: rgba(255,255,255,.12); }
#wdi-ux-page .oc-card.is-ai .oc-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); color: #fff; }
#wdi-ux-page .oc-card.is-ai .oc-num { color: rgba(255,255,255,.4); }
#wdi-ux-page .oc-card.is-ai .oc-title { color: #fff; }
#wdi-ux-page .oc-card.is-ai .oc-short { color: rgba(255,255,255,.9); }
#wdi-ux-page .oc-card.is-ai .oc-desc { color: rgba(255,255,255,.66); }
#wdi-ux-page .oc-card.is-ai .oc-rel-label { color: var(--rose-300); }
#wdi-ux-page .oc-card.is-ai .oc-rel-text { color: rgba(255,255,255,.74); }
#wdi-ux-page .oc-card.is-ai .ai-aura { opacity: .26; }
#wdi-ux-page .oc-card.is-ai .oc-grid-fx {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(80% 90% at 75% 25%, #000, transparent 82%);
          mask-image: radial-gradient(80% 90% at 75% 25%, #000, transparent 82%);
}

/* ============================================================
   SECTION-LEVEL CTA  (shared by both variants)
   ============================================================ */
#wdi-ux-page .out-cta {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  padding: 36px 40px; border-radius: 22px; position: relative; overflow: hidden;
}
#wdi-ux-page .outcomes--a .out-cta { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
#wdi-ux-page .outcomes--b .out-cta {
  background: radial-gradient(120% 180% at 100% 0%, rgba(249,47,100,.07), transparent 58%), var(--bg);
  border: 1px solid var(--line);
}
#wdi-ux-page .out-cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--rose-600), var(--rose-400) 55%, #7A00FF); }
#wdi-ux-page .out-cta-h { font-size: clamp(20px, 2vw, 25px); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
#wdi-ux-page .outcomes--a .out-cta-h { color: #fff; }
#wdi-ux-page .outcomes--b .out-cta-h { color: var(--ink); }
#wdi-ux-page .out-cta-p { margin-top: 10px; font-size: 15px; line-height: 1.55; font-weight: 300; max-width: 62ch; text-wrap: pretty; }
#wdi-ux-page .outcomes--a .out-cta-p { color: rgba(255,255,255,.74); }
#wdi-ux-page .outcomes--b .out-cta-p { color: var(--ink-2); }
#wdi-ux-page .out-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
#wdi-ux-page .out-btn-primary, #wdi-ux-page .out-btn-secondary {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  border-radius: 999px; padding: 14px 22px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
#wdi-ux-page .out-btn-primary { color: #fff; background: var(--rose-600); border: 1px solid var(--rose-600); box-shadow: 0 8px 24px rgba(228,18,82,.26); }
#wdi-ux-page .out-btn-primary svg { width: 17px; height: 17px; transition: transform .25s ease; }
#wdi-ux-page .out-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(228,18,82,.34); }
#wdi-ux-page .out-btn-primary:hover svg { transform: translateX(3px); }
#wdi-ux-page .outcomes--a .out-btn-secondary { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.22); }
#wdi-ux-page .outcomes--a .out-btn-secondary:hover { border-color: var(--rose-300); transform: translateY(-2px); }
#wdi-ux-page .outcomes--b .out-btn-secondary { color: var(--ink); background: transparent; border: 1px solid var(--line-2); }
#wdi-ux-page .outcomes--b .out-btn-secondary:hover { border-color: var(--rose-300); transform: translateY(-2px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  #wdi-ux-page .ob-grid { grid-template-columns: repeat(2, 1fr); }
  #wdi-ux-page .oc-grid { grid-template-columns: repeat(2, 1fr); }
  #wdi-ux-page .oc-card.w2, #wdi-ux-page .oc-card.w3, #wdi-ux-page .oc-card.w4 { grid-column: span 1; }
  #wdi-ux-page .oc-face--wide { flex-direction: column; gap: 0; }
  #wdi-ux-page .oc-face--wide .oc-wide-l { flex: none; }
  #wdi-ux-page .oc-face--wide .oc-wide-l .oc-short { margin-top: 11px; padding-top: 0; }
  #wdi-ux-page .oc-face--wide .oc-wide-r { border-left: none; padding-left: 0; margin-top: 16px; justify-content: flex-start; }
  #wdi-ux-page .oc-card.is-ai .oc-face--wide .oc-wide-r { border-left: none; }
}
@media (max-width: 900px) {
  #wdi-ux-page .oa-row { flex-direction: column; height: auto; }
  #wdi-ux-page .oa-panel { flex: none; min-height: 84px; }
  #wdi-ux-page .oa-panel.active { min-height: 380px; }
  #wdi-ux-page .oa-rail { flex-direction: row; gap: 18px; padding: 0 22px; align-items: center; }
  #wdi-ux-page .oa-vtitle { writing-mode: horizontal-tb; transform: none; margin: 0; }
  #wdi-ux-page .oa-ico { margin-top: 0; }
  #wdi-ux-page .oa-full { min-width: 0; padding: 26px; }
}
@media (max-width: 760px) {
  #wdi-ux-page .wrap { padding: 0 22px; }
  #wdi-ux-page .variant-tag { padding: 12px 22px; }
  #wdi-ux-page .outcomes { padding: 66px 0 76px; }
  #wdi-ux-page .ob-grid { grid-template-columns: 1fr; }
  #wdi-ux-page .oc-grid { grid-template-columns: 1fr; }
  #wdi-ux-page .out-cta { padding: 26px; gap: 20px; }
  #wdi-ux-page .out-cta-actions { width: 100%; }
  #wdi-ux-page .out-btn-primary, #wdi-ux-page .out-btn-secondary { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #wdi-ux-page .amb span, #wdi-ux-page .ai-aura { animation: none; }
  #wdi-ux-page .ob-card { transform: none; }
  #wdi-ux-page .oa-full { transition: none; }
}

/* ============================================================
   WDI — Services section · 5 variants
   Cohesive with the homepage system: rose accent, ink type,
   near-white grounds, premium dark image frames.
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;
  --violet:#7A00FF;--violet-2:#A24BFF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}

#wdi-ux-page *{ box-sizing:border-box; }
#wdi-ux-page{ -webkit-text-size-adjust:100%; }
#wdi-ux-page{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#wdi-ux-page a{ color:inherit; }
#wdi-ux-page img{ display:block; max-width:100%; }

/* ---- variant label strip (dev affordance, mirrors other variant files) ---- */
#wdi-ux-page .svv-vtag{
  font-family:var(--font);
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-2);
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:13px clamp(20px,5vw,64px);
  max-width:100%;
}
#wdi-ux-page .svv-vtag b{ color:var(--ink); font-weight:600; }
#wdi-ux-page .svv-vtag .pill{
  display:inline-block;
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--ink);
  padding:3px 10px; border-radius:999px; margin-right:10px;
  vertical-align:middle;
}

/* ---- shared section scaffolding ---- */
#wdi-ux-page .svv-sec{ padding:clamp(64px,8vw,108px) 0; border-top:1px solid var(--line); }
#wdi-ux-page .svv-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); }
#wdi-ux-page .sv2{ background:var(--bg-2); }
#wdi-ux-page .sv4{ background:var(--bg-2); }

#wdi-ux-page .svv-head{ max-width:880px; }
#wdi-ux-page .svv-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose-600);
}
#wdi-ux-page .svv-eyebrow::before{
  content:""; width:7px; height:7px; border-radius:2px;
  background:linear-gradient(135deg,var(--rose-600),var(--rose-400));
  box-shadow:0 0 10px rgba(249,47,100,.5);
}
#wdi-ux-page .svv-h{
  margin:18px 0 0;
  font-size:clamp(28px,3.5vw,46px);
  line-height:1.06; font-weight:500; letter-spacing:-.03em;
  color:var(--ink); text-wrap:balance;
}
#wdi-ux-page .svv-answer,#wdi-ux-page .svv-support{
  margin:18px 0 0;
  font-size:clamp(15.5px,1.3vw,18px);
  line-height:1.6; font-weight:300; color:var(--ink-2);
  max-width:74ch; text-wrap:pretty;
}

/* shared button language */
#wdi-ux-page .svv-btn-dark,#wdi-ux-page .svv-btn-ghost{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font); font-size:15px; font-weight:500; letter-spacing:-.01em;
  border-radius:999px; padding:14px 22px; text-decoration:none; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
#wdi-ux-page .svv-btn-dark{ color:#fff; background:var(--ink); box-shadow:0 1px 2px rgba(11,12,14,.18),0 8px 24px rgba(11,12,14,.10); }
#wdi-ux-page .svv-btn-dark svg{ width:17px; height:17px; transition:transform .25s ease; }
#wdi-ux-page .svv-btn-dark:hover{ background:var(--rose-600); transform:translateY(-2px); box-shadow:0 2px 6px rgba(228,18,82,.30),0 14px 34px rgba(228,18,82,.26); }
#wdi-ux-page .svv-btn-dark:hover svg{ transform:translateX(3px); }
#wdi-ux-page .svv-btn-ghost{ color:var(--ink); background:transparent; border:1px solid var(--line-2); }
#wdi-ux-page .svv-btn-ghost:hover{ border-color:var(--rose-300); transform:translateY(-2px); }

/* tick + arrow glyph sizing */
#wdi-ux-page .tickdot{
  width:19px; height:19px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--rose-soft); color:var(--rose-600);
}
#wdi-ux-page .tickdot svg{ width:11px; height:11px; }

/* ============================================================
   VARIANT A — CAPSULE SWITCHER + DEVICE VISUAL
   ============================================================ */
#wdi-ux-page .sv1-pills{
  margin-top:clamp(32px,4vw,52px);
  display:flex; flex-wrap:wrap; gap:12px;
}
#wdi-ux-page .sv1-pill{
  font-family:var(--font); font-size:15px; font-weight:500; letter-spacing:-.01em;
  color:var(--ink); background:var(--bg);
  border:1px solid var(--line-2); border-radius:999px;
  padding:13px 22px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:10px;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
#wdi-ux-page .sv1-pill .pill-ico{ width:18px; height:18px; color:var(--rose-600); transition:color .3s ease; }
#wdi-ux-page .sv1-pill .pill-ico svg{ width:100%; height:100%; }
#wdi-ux-page .sv1-pill:hover{ border-color:var(--rose-300); transform:translateY(-2px); }
#wdi-ux-page .sv1-pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 10px 26px rgba(11,12,14,.16); }
#wdi-ux-page .sv1-pill.active .pill-ico{ color:var(--rose-400); }

#wdi-ux-page .sv1-split{
  margin-top:26px;
  display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:stretch;
}
#wdi-ux-page .sv1-panel{
  background:var(--bg); border:1px solid var(--line); border-radius:24px;
  padding:clamp(28px,3vw,42px); display:flex; flex-direction:column;
}
#wdi-ux-page .sv1-num{
  font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--rose-600);
  font-feature-settings:"tnum" 1;
}
#wdi-ux-page .sv1-title{
  margin-top:14px; font-size:clamp(24px,2.4vw,32px); font-weight:500;
  letter-spacing:-.025em; color:var(--ink); line-height:1.08;
}
#wdi-ux-page .sv1-desc{
  margin-top:14px; font-size:16px; line-height:1.6; font-weight:300; color:var(--ink-2);
  max-width:50ch;
}
#wdi-ux-page .sv1-sub-label{
  display:block; margin-top:26px; font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rose-600);
}
#wdi-ux-page .sv1-subs{
  margin:14px 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:11px 22px;
}
#wdi-ux-page .sv1-subs li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:400; color:var(--ink-2); }
#wdi-ux-page .sv1-outcomes{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
#wdi-ux-page .sv1-outcomes i{
  font-style:normal; font-size:12.5px; font-weight:500; color:var(--muted);
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px;
}
#wdi-ux-page .sv1-cta-row{ margin-top:auto; padding-top:30px; display:flex; gap:12px; flex-wrap:wrap; }

/* dark visual frame with device-style inner card */
/* full-bleed signature image card (left, 60%) */
#wdi-ux-page .sv1-visual{
  position:relative; border-radius:24px; overflow:hidden; min-height:520px;
  background:#0A0B0E; border:1px solid var(--line);
}
#wdi-ux-page .sv1-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .sv1-visual:hover .sv1-photo{ transform:scale(1.045); }
#wdi-ux-page .sv1-photo-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,12,.05) 30%, rgba(8,9,12,.30) 62%, rgba(8,9,12,.86) 100%);
}
#wdi-ux-page .sv1-photo-cap{ position:absolute; left:clamp(24px,3vw,38px); right:24px; bottom:clamp(24px,3vw,36px); z-index:2; color:#fff; }
#wdi-ux-page .sv1-photo-tag{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  border-radius:999px; padding:6px 13px; backdrop-filter:blur(6px);
}
#wdi-ux-page .sv1-photo-name{
  display:block; margin-top:16px; font-size:clamp(22px,2.3vw,30px); font-weight:500;
  letter-spacing:-.025em; line-height:1.06; max-width:14ch;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
#wdi-ux-page .sv1-fade{ animation:svvFade .5s cubic-bezier(.2,.7,.2,1); }
@keyframes svvFade{ from{ transform:translateY(10px); } to{ transform:none; } }

/* ============================================================
   VARIANT B — GIANT EDITORIAL INDEX
   ============================================================ */
#wdi-ux-page .sv2-body{
  margin-top:clamp(36px,5vw,60px);
  display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(32px,5vw,72px); align-items:start;
}
#wdi-ux-page .sv2-names{ display:flex; flex-direction:column; }
#wdi-ux-page .sv2-name{
  display:flex; align-items:baseline; gap:20px; width:100%; text-align:left;
  font-family:var(--font); background:none; border:none; cursor:pointer;
  padding:clamp(14px,1.6vw,22px) 0; border-top:1px solid var(--line);
  font-size:clamp(30px,4.6vw,62px); font-weight:600; letter-spacing:-.035em; line-height:1;
  color:#D7D9DE; transition:color .35s ease, padding-left .4s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .sv2-names .sv2-name:last-child{ border-bottom:1px solid var(--line); }
#wdi-ux-page .sv2-name .nm-idx{
  flex:none; width:34px; font-size:14px; font-weight:600; letter-spacing:0;
  color:var(--faint); font-feature-settings:"tnum" 1; transition:color .35s ease;
}
#wdi-ux-page .sv2-name .nm-txt{ display:block; }
#wdi-ux-page .sv2-name:hover{ color:var(--ink-2); padding-left:10px; }
#wdi-ux-page .sv2-name.active{ color:var(--ink); padding-left:10px; }
#wdi-ux-page .sv2-name.active .nm-idx{ color:var(--rose-600); }

#wdi-ux-page .sv2-side{ position:sticky; top:40px; }
#wdi-ux-page .sv2-side-img{
  position:relative; aspect-ratio:5/4; border-radius:18px; overflow:hidden;
  background:#0A0B0E; border:1px solid var(--line);
}
#wdi-ux-page .sv2-side-img img{ width:100%; height:100%; object-fit:cover; transition:opacity .5s ease; }
#wdi-ux-page .sv2-side-tag{
  position:absolute; left:16px; bottom:16px; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(11,12,14,.5); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:6px 13px; backdrop-filter:blur(6px);
}
#wdi-ux-page .sv2-side-desc{ margin:20px 0 0; font-size:15.5px; line-height:1.6; font-weight:300; color:var(--ink-2); }
#wdi-ux-page .sv2-side-label{
  display:block; margin:24px 0 0; font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rose-600);
}
#wdi-ux-page .sv2-subs2{ margin:12px 0 0; padding:0; list-style:none; }
#wdi-ux-page .sv2-subs2 li{
  display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:400; color:var(--ink-2);
  padding:12px 0; border-top:1px solid var(--line);
}
#wdi-ux-page .sv2-subs2 li:first-child{ border-top:none; }
#wdi-ux-page .sv2-side-cta{ margin-top:24px; }

/* ============================================================
   VARIANT C — CINEMATIC IMAGE + NUMBERED ACCORDION
   ============================================================ */
#wdi-ux-page .sv3-stage{
  margin-top:clamp(32px,4vw,52px);
  position:relative; border-radius:26px; overflow:hidden;
  min-height:600px; background:#08090C; border:1px solid #16181d;
  display:grid; grid-template-columns:1fr 1fr;
}
#wdi-ux-page .sv3-photo{ position:absolute; inset:0; z-index:0; }
#wdi-ux-page .sv3-photo .ph{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06); transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .sv3-photo .ph.on{ opacity:1; transform:scale(1); }
#wdi-ux-page .sv3-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(8,9,12,.30) 0%, rgba(8,9,12,.55) 42%, rgba(8,9,12,.92) 100%);
}
#wdi-ux-page .sv3-rail{
  position:relative; z-index:3; grid-column:1; align-self:start;
  display:flex; flex-direction:column; gap:6px; padding:30px;
}
#wdi-ux-page .sv3-tab{
  display:inline-flex; align-items:center; gap:12px; width:max-content;
  font-family:var(--font); font-size:14px; font-weight:500; letter-spacing:-.01em;
  color:rgba(255,255,255,.6); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:9px 16px 9px 11px;
  cursor:pointer; backdrop-filter:blur(6px);
  transition:color .3s ease, background .3s ease, border-color .3s ease;
}
#wdi-ux-page .sv3-tab .t-n{
  width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.22); transition:all .3s ease;
}
#wdi-ux-page .sv3-tab:hover{ color:#fff; border-color:rgba(255,255,255,.3); }
#wdi-ux-page .sv3-tab.active{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); }
#wdi-ux-page .sv3-tab.active .t-n{ background:linear-gradient(135deg,var(--rose-600),var(--rose-400)); color:#fff; border-color:transparent; }

#wdi-ux-page .sv3-panel{
  position:relative; z-index:3; grid-column:2; align-self:end; justify-self:end;
  width:100%; max-width:520px; margin:30px; color:#fff;
}
#wdi-ux-page .sv3-num{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); font-size:15px; font-weight:600; color:#fff;
}
#wdi-ux-page .sv3-title{ margin:22px 0 0; font-size:clamp(26px,2.8vw,36px); font-weight:500; letter-spacing:-.025em; line-height:1.05; }
#wdi-ux-page .sv3-desc{ margin:14px 0 0; font-size:15px; line-height:1.6; font-weight:300; color:rgba(255,255,255,.8); max-width:46ch; }
#wdi-ux-page .sv3-acc{ margin-top:24px; border-top:1px solid rgba(255,255,255,.16); }
#wdi-ux-page .sv3-arow{ border-bottom:1px solid rgba(255,255,255,.16); }
#wdi-ux-page .sv3-arow-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer; padding:16px 2px;
  font-family:var(--font); font-size:16px; font-weight:500; letter-spacing:-.01em; color:#fff; text-align:left;
}
#wdi-ux-page .sv3-arow-head .pm{ position:relative; width:16px; height:16px; flex:none; }
#wdi-ux-page .sv3-arow-head .pm::before,#wdi-ux-page .sv3-arow-head .pm::after{
  content:""; position:absolute; left:50%; top:50%; background:rgba(255,255,255,.8);
  transform:translate(-50%,-50%); transition:transform .3s ease, opacity .3s ease;
}
#wdi-ux-page .sv3-arow-head .pm::before{ width:16px; height:1.6px; }
#wdi-ux-page .sv3-arow-head .pm::after{ width:1.6px; height:16px; }
#wdi-ux-page .sv3-arow.open .pm::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
#wdi-ux-page .sv3-arow-body{
  overflow:hidden; max-height:0; transition:max-height .4s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .sv3-arow-body p{
  margin:0; padding:0 2px 18px; font-size:14px; line-height:1.6; font-weight:300; color:rgba(255,255,255,.72); max-width:44ch;
}
#wdi-ux-page .sv3-cta-row{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
#wdi-ux-page .sv3-btn{
  display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500;
  border-radius:999px; padding:13px 20px; text-decoration:none; white-space:nowrap;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
#wdi-ux-page .sv3-btn.solid{ background:#fff; color:var(--ink); }
#wdi-ux-page .sv3-btn.solid svg{ width:16px; height:16px; }
#wdi-ux-page .sv3-btn.solid:hover{ background:var(--rose-500); color:#fff; transform:translateY(-2px); }
#wdi-ux-page .sv3-btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
#wdi-ux-page .sv3-btn.ghost:hover{ border-color:#fff; transform:translateY(-2px); }
#wdi-ux-page .sv3-reveal{ animation:sv3rise .6s cubic-bezier(.2,.7,.2,1); }
@keyframes sv3rise{ from{ transform:translateY(14px); } to{ transform:none; } }

/* ============================================================
   VARIANT D — BIG TEXT ROWS + THUMBNAILS
   ============================================================ */
#wdi-ux-page .sv4-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
#wdi-ux-page .sv4-head-hint{
  margin:0 0 6px; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--muted);
}
#wdi-ux-page .sv4-head-hint::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--rose-500); box-shadow:0 0 0 4px var(--rose-soft);
}
#wdi-ux-page .sv4-rows{ margin-top:clamp(28px,4vw,46px); }
#wdi-ux-page .sv4-row{
  position:relative; padding:clamp(26px,3.2vw,40px) 0 clamp(26px,3.2vw,40px) 26px; border-top:1px solid var(--line);
  cursor:pointer;
}
#wdi-ux-page .sv4-row:last-child{ border-bottom:1px solid var(--line); }
#wdi-ux-page .sv4-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--rose-500);
  transition:width .35s ease;
}
#wdi-ux-page .sv4-row:hover::before,#wdi-ux-page .sv4-row.open::before{ width:3px; }
#wdi-ux-page .sv4-row-main{
  display:grid; grid-template-columns:minmax(0,360px) 1fr 264px;
  gap:clamp(24px,4vw,56px); align-items:center;
}
#wdi-ux-page .sv4-row-l{ display:flex; align-items:flex-start; gap:18px; }
#wdi-ux-page .sv4-dot{
  margin-top:14px; width:10px; height:10px; flex:none; border-radius:50%;
  background:var(--line-2); transition:background .35s ease, box-shadow .35s ease;
}
#wdi-ux-page .sv4-row:hover .sv4-dot,#wdi-ux-page .sv4-row.open .sv4-dot{ background:var(--rose-500); box-shadow:0 0 0 5px var(--rose-soft); }
#wdi-ux-page .sv4-name{ font-size:clamp(28px,3.4vw,46px); font-weight:500; letter-spacing:-.03em; line-height:1.0; color:var(--ink); transition:color .3s ease; }
#wdi-ux-page .sv4-row:hover .sv4-name{ color:var(--rose-600); }
#wdi-ux-page .sv4-tag{ margin-top:12px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-600); }
#wdi-ux-page .sv4-mid{ min-width:0; }
#wdi-ux-page .sv4-overview{ margin:0; font-size:15.5px; line-height:1.62; font-weight:300; color:var(--ink-2); max-width:54ch; }
#wdi-ux-page .sv4-thumb{
  position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  background:#0A0B0E; border:1px solid var(--line); text-decoration:none;
}
#wdi-ux-page .sv4-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); filter:saturate(1.02); }
#wdi-ux-page .sv4-row:hover .sv4-thumb img{ transform:scale(1.06); }
#wdi-ux-page .sv4-thumb-cta{
  position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:500; color:#fff; background:rgba(11,12,14,.55);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:8px 13px;
  backdrop-filter:blur(8px); text-decoration:none;
  transition:background .3s ease, gap .3s ease;
}
#wdi-ux-page .sv4-thumb-cta svg{ width:13px; height:13px; }
#wdi-ux-page .sv4-thumb-cta:hover{ background:var(--rose-600); border-color:var(--rose-600); gap:10px; }

/* sub-services rise in beneath the row on hover/open */
#wdi-ux-page .sv4-subs{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .sv4-row:hover .sv4-subs,#wdi-ux-page .sv4-row.open .sv4-subs{ max-height:280px; }
#wdi-ux-page .sv4-subs-inner{ padding:24px 0 6px 28px; }
#wdi-ux-page .sv4-subs-label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose-600); margin-bottom:12px;
}
#wdi-ux-page .sv4-subs-chips{ display:flex; flex-wrap:wrap; gap:9px; }
#wdi-ux-page .sv4-subs-chips i{
  font-style:normal; font-size:13.5px; font-weight:500; letter-spacing:-.005em; color:var(--ink-2);
  background:var(--bg); border:1px solid var(--line-2); border-radius:999px; padding:9px 16px;
  transition:border-color .25s ease, color .25s ease, transform .25s ease;
}
#wdi-ux-page .sv4-subs-chips i:hover{ border-color:var(--rose-300); color:var(--ink); transform:translateY(-2px); }

/* ============================================================
   VARIANT E — SCROLL-STICKY INDEX
   ============================================================ */
#wdi-ux-page .sv5-grid{
  margin-top:clamp(36px,5vw,60px);
  display:grid; grid-template-columns:268px 1fr; gap:clamp(30px,5vw,72px); align-items:start;
}
#wdi-ux-page .sv5-rail{ position:sticky; top:40px; display:flex; flex-direction:column; gap:2px; }
#wdi-ux-page .sv5-tab{
  position:relative; display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  font-family:var(--font); background:none; border:none; cursor:pointer;
  padding:16px 6px; border-top:1px solid var(--line);
  transition:padding-left .35s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .sv5-rail .sv5-tab:last-child{ border-bottom:1px solid var(--line); }
#wdi-ux-page .sv5-tab-idx{ font-size:12.5px; font-weight:600; color:var(--faint); font-feature-settings:"tnum" 1; transition:color .3s ease; }
#wdi-ux-page .sv5-tab-name{ font-size:17px; font-weight:500; letter-spacing:-.02em; color:var(--muted); transition:color .3s ease, transform .3s ease; }
#wdi-ux-page .sv5-tab:hover{ padding-left:12px; }
#wdi-ux-page .sv5-tab:hover .sv5-tab-name{ color:var(--ink-2); }
#wdi-ux-page .sv5-tab.active{ padding-left:12px; }
#wdi-ux-page .sv5-tab.active .sv5-tab-name{ color:var(--ink); transform:translateX(2px); }
#wdi-ux-page .sv5-tab.active .sv5-tab-idx{ color:var(--rose-600); }
#wdi-ux-page .sv5-tab .sv5-tab-bar{
  position:absolute; left:0; top:-1px; bottom:-1px; width:2px; background:var(--rose-500);
  transform:scaleY(0); transform-origin:center; transition:transform .35s ease;
}
#wdi-ux-page .sv5-tab.active .sv5-tab-bar{ transform:scaleY(1); }

#wdi-ux-page .sv5-content{ display:flex; flex-direction:column; gap:clamp(48px,7vw,104px); }
#wdi-ux-page .sv5-block{ scroll-margin-top:40px; }
#wdi-ux-page .sv5-block-num{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--rose-600); font-feature-settings:"tnum" 1; }
#wdi-ux-page .sv5-block-name{ margin:12px 0 0; font-size:clamp(30px,4vw,52px); font-weight:500; letter-spacing:-.03em; line-height:1.02; color:var(--ink); }
#wdi-ux-page .sv5-block-desc{ margin:18px 0 0; font-size:clamp(16px,1.4vw,18.5px); line-height:1.6; font-weight:300; color:var(--ink-2); max-width:60ch; }
#wdi-ux-page .sv5-block-media{
  margin-top:26px; position:relative; aspect-ratio:21/8; border-radius:20px; overflow:hidden;
  background:#0A0B0E; border:1px solid var(--line);
}
#wdi-ux-page .sv5-block-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .sv5-block:hover .sv5-block-media img{ transform:scale(1.04); }
#wdi-ux-page .sv5-sub-label{ display:block; margin-top:30px; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-600); }
#wdi-ux-page .sv5-subs{ margin:16px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#wdi-ux-page .sv5-subs li{
  display:flex; align-items:center; gap:11px; font-size:15px; font-weight:400; color:var(--ink-2);
  padding:14px 16px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
#wdi-ux-page .sv5-subs li:hover{ border-color:var(--rose-300); transform:translateY(-2px); background:var(--bg); }
#wdi-ux-page .sv5-outcomes{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
#wdi-ux-page .sv5-outcomes i{
  font-style:normal; font-size:13px; font-weight:500; color:var(--muted);
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:7px 14px;
}
#wdi-ux-page .sv5-cta-row{ margin-top:28px; }

/* ============================================================
   SHARED CLOSER — AI NOTE + RECOMMENDATION
   ============================================================ */
#wdi-ux-page .svv-closer{ background:var(--bg); }
#wdi-ux-page .ai-note{
  position:relative; border-radius:26px; overflow:hidden;
  background:#0A0B0E; border:1px solid #16181d; padding:clamp(34px,5vw,64px);
}
#wdi-ux-page .ai-note-mesh{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(249,47,100,.42), transparent 52%),
    radial-gradient(100% 120% at 0% 100%, rgba(122,0,255,.34), transparent 56%),
    radial-gradient(80% 80% at 50% 50%, rgba(0,229,255,.10), transparent 60%);
}
#wdi-ux-page .ai-note-mesh::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(90% 90% at 70% 20%,#000,transparent 82%);
          mask-image:radial-gradient(90% 90% at 70% 20%,#000,transparent 82%);
}
#wdi-ux-page .ai-note-inner{ position:relative; z-index:2; max-width:64ch; color:#fff; }
#wdi-ux-page .ai-note-badge{
  display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:8px 14px 8px 11px; backdrop-filter:blur(6px);
}
#wdi-ux-page .ai-note-badge svg{ width:17px; height:17px; }
#wdi-ux-page .ai-note-h{ margin:22px 0 0; font-size:clamp(24px,2.6vw,34px); font-weight:500; letter-spacing:-.025em; line-height:1.08; }
#wdi-ux-page .ai-note-p{ margin:16px 0 0; font-size:16px; line-height:1.62; font-weight:300; color:rgba(255,255,255,.84); }
#wdi-ux-page .ai-note-seo{ margin:14px 0 0; font-size:13.5px; line-height:1.6; font-weight:300; color:rgba(255,255,255,.56); max-width:74ch; }
#wdi-ux-page .ai-note-cta{
  margin-top:26px; display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:500; color:var(--ink); background:#fff;
  border-radius:999px; padding:14px 22px; text-decoration:none;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
#wdi-ux-page .ai-note-cta svg{ width:17px; height:17px; transition:transform .25s ease; }
#wdi-ux-page .ai-note-cta:hover{ background:var(--rose-500); color:#fff; transform:translateY(-2px); }
#wdi-ux-page .ai-note-cta:hover svg{ transform:translateX(3px); }

#wdi-ux-page .svv-reco{
  margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  padding:clamp(28px,3.4vw,40px); border:1px solid var(--line); border-radius:24px;
  background:radial-gradient(120% 160% at 100% 0%, rgba(249,47,100,.06), transparent 60%), var(--bg);
  position:relative; overflow:hidden;
}
#wdi-ux-page .svv-reco::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet)); }
#wdi-ux-page .svv-reco-h{ margin:0; font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
#wdi-ux-page .svv-reco-p{ margin:10px 0 0; font-size:15px; line-height:1.55; font-weight:300; color:var(--ink-2); max-width:62ch; text-wrap:pretty; }
#wdi-ux-page .svv-reco-actions{ display:flex; gap:12px; flex-wrap:wrap; flex:none; }
#wdi-ux-page .svv-closing{
  margin:30px auto 0; max-width:72ch; text-align:center;
  font-size:15.5px; line-height:1.6; font-weight:300; color:var(--muted); text-wrap:pretty;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  #wdi-ux-page .sv1-split{ grid-template-columns:1fr; }
  #wdi-ux-page .sv1-visual{ min-height:340px; }
  #wdi-ux-page .sv2-body{ grid-template-columns:1fr; gap:30px; }
  #wdi-ux-page .sv2-side{ position:static; max-width:460px; }
  #wdi-ux-page .sv3-stage{ grid-template-columns:1fr; min-height:auto; }
  #wdi-ux-page .sv3-panel{ grid-column:1; justify-self:stretch; max-width:none; }
  #wdi-ux-page .sv4-row-main{ grid-template-columns:1fr; gap:18px; }
  #wdi-ux-page .sv4-thumb{ max-width:380px; }
  #wdi-ux-page .sv4-subs-inner{ padding-left:0; }
  #wdi-ux-page .sv5-grid{ grid-template-columns:1fr; }
  #wdi-ux-page .sv5-rail{ position:static; flex-direction:row; flex-wrap:wrap; gap:0; }
  #wdi-ux-page .sv5-tab{ flex:1 1 46%; border-top:1px solid var(--line); }
}
@media (max-width:560px){
  #wdi-ux-page .sv1-subs{ grid-template-columns:1fr; }
  #wdi-ux-page .sv5-subs{ grid-template-columns:1fr; }
  #wdi-ux-page .sv3-rail{ flex-direction:row; flex-wrap:wrap; }
  #wdi-ux-page .svv-reco-actions{ width:100%; }
  #wdi-ux-page .svv-btn-dark,#wdi-ux-page .svv-btn-ghost{ flex:1; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  #wdi-ux-page *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   WDI — Our Process · Sticky header + tall stacking gradient cards
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--rose-200:#FFB3C7;--rose-100:#FFE0E9;
  --violet:#7A00FF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1360px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* shared header type */
#wdi-ux-page .pr-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .pr-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .pr-h{margin-top:22px;font-size:clamp(36px,4vw,56px);line-height:1.02;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .pr-answer{margin-top:26px;font-size:clamp(16px,1.3vw,18px);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:48ch;}
#wdi-ux-page .pr-sub{margin-top:18px;font-size:14.5px;line-height:1.6;font-weight:400;color:var(--muted);max-width:52ch;}
#wdi-ux-page .pr-intro{margin-top:16px;font-size:14px;line-height:1.55;font-weight:400;color:var(--muted);max-width:52ch;font-style:italic;}

/* shared buttons + CTA */
#wdi-ux-page .pr-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:500;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,box-shadow .3s;}
#wdi-ux-page .pr-btn svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .pr-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(228,18,82,.28);}
#wdi-ux-page .pr-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .pr-btn-ghost{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:14px 22px;text-decoration:none;transition:border-color .25s,transform .25s;}
#wdi-ux-page .pr-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
#wdi-ux-page .pr-header-cta{margin-top:36px;}
#wdi-ux-page .pr-cta{margin-top:60px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:38px 42px;border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.07),transparent 58%),var(--bg);}
#wdi-ux-page .pr-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet));}
#wdi-ux-page .pr-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .pr-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
#wdi-ux-page .pr-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

/* section */
#wdi-ux-page .pra-sec{position:relative;padding:100px 0 160px;border-top:1px solid var(--line);background:var(--bg);}
#wdi-ux-page .pra-grid{display:grid;grid-template-columns:0.72fr 1.28fr;gap:80px;align-items:start;}
#wdi-ux-page .pra-left{position:sticky;top:90px;align-self:start;}
#wdi-ux-page .pra-cards{display:flex;flex-direction:column;gap:24px;}

/* === the card === */
#wdi-ux-page .pra-card{
  position:sticky;
  border-radius:36px;
  padding:48px 54px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  min-height:min(60vh,580px);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(11,12,14,.10);
  transition:box-shadow .4s;
}
#wdi-ux-page .pra-card:nth-child(1){top:90px; background:#FFFFFF; color:var(--ink); border:1px solid var(--line);}
#wdi-ux-page .pra-card:nth-child(2){top:120px;background:#FFE9F0; color:var(--ink);}
#wdi-ux-page .pra-card:nth-child(3){top:150px;background:#FFC2D2; color:var(--ink);}
#wdi-ux-page .pra-card:nth-child(4){top:180px;background:#F92F64; color:#fff;}
#wdi-ux-page .pra-card:nth-child(5){top:210px;background:#6B0820; color:#fff;}
#wdi-ux-page .pra-card:nth-child(6){top:240px;background:#0B0C0E; color:#fff;}

/* top chrome — number left, toggle right */
#wdi-ux-page .pra-top{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;}
#wdi-ux-page .pra-numchip{
  flex:none;
  width:48px;height:48px;border-radius:50%;
  border:1px solid currentColor;
  display:grid;place-items:center;
  font-size:16px;font-weight:500;letter-spacing:.02em;
  opacity:.7;
  font-feature-settings:"tnum" 1;
  transition:opacity .3s,background .3s;
}
#wdi-ux-page .pra-card:hover .pra-numchip{opacity:1;}
#wdi-ux-page .pra-toggle{
  flex:none;
  width:56px;height:56px;border-radius:50%;
  background:transparent;border:1px solid currentColor;
  display:grid;place-items:center;cursor:pointer;
  color:inherit;opacity:.5;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .3s,background .3s;
}
#wdi-ux-page .pra-card:hover .pra-toggle{opacity:1;background:rgba(255,255,255,.06);}
#wdi-ux-page .pra-card:nth-child(-n+3):hover .pra-toggle{background:rgba(0,0,0,.04);}
#wdi-ux-page .pra-toggle svg{width:22px;height:22px;}
#wdi-ux-page .pra-card.open .pra-toggle{transform:rotate(45deg);opacity:1;}

/* expand panel — slides into the blank space below the top chrome */
#wdi-ux-page .pra-detail{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .65s cubic-bezier(.2,.7,.2,1),margin-top .55s ease;
  margin-top:0;
}
#wdi-ux-page .pra-card.open .pra-detail{grid-template-rows:1fr;margin-top:40px;}
#wdi-ux-page .pra-detail-inner{overflow:hidden;}
#wdi-ux-page .pra-detail-body{max-width:60ch;}
#wdi-ux-page .pra-detail-label{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:14px;}
#wdi-ux-page .pra-detail-body p{font-size:16px;font-weight:400;line-height:1.6;opacity:.92;}
#wdi-ux-page .pra-detail-body .aeo{margin-top:26px;padding-left:18px;border-left:3px solid var(--rose-500);}
#wdi-ux-page .pra-card:nth-child(n+4) .pra-detail-body .aeo{border-left-color:var(--rose-300);}
#wdi-ux-page .pra-detail-body .aeo p{font-size:14.5px;font-style:italic;opacity:.78;line-height:1.55;}

/* bottom content — title + short, pinned to bottom */
#wdi-ux-page .pra-bottom{margin-top:auto;}
#wdi-ux-page .pra-label{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:20px;}
#wdi-ux-page .pra-title{
  font-size:clamp(34px,3.4vw,52px);
  font-weight:500;letter-spacing:-0.035em;line-height:1.02;
  text-wrap:balance;
}
#wdi-ux-page .pra-short{
  margin-top:22px;
  font-size:clamp(15px,1.25vw,17.5px);
  font-weight:400;line-height:1.5;opacity:.82;
  max-width:54ch;
}

/* responsive */
@media(max-width:1000px){
  #wdi-ux-page .pra-grid{grid-template-columns:1fr;gap:40px;}
  #wdi-ux-page .pra-left{position:relative;top:0;}
}
@media(max-width:760px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .pra-sec{padding:70px 0 100px;}
  #wdi-ux-page .pra-card{padding:36px 32px;min-height:520px;border-radius:28px;}
  #wdi-ux-page .pra-numchip{width:42px;height:42px;font-size:14px;}
  #wdi-ux-page .pra-toggle{width:46px;height:46px;}
  #wdi-ux-page .pra-toggle svg{width:18px;height:18px;}
  #wdi-ux-page .pra-title{font-size:34px;}
  #wdi-ux-page .pr-cta{padding:26px;gap:20px;}
  #wdi-ux-page .pr-cta-actions{width:100%;}
  #wdi-ux-page .pr-cta .pr-btn,#wdi-ux-page .pr-btn-ghost{flex:1;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .pra-card,#wdi-ux-page .pra-detail{transition:none;animation:none;}
}

/* ============================================================
   VARIANT TAG header (dev label)
   ============================================================ */
#wdi-ux-page .pr-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .pr-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .pr-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

/* ============================================================
   VARIANT B — compact "How it works" + flip step cells
   ============================================================ */
#wdi-ux-page .prc-sec{position:relative;padding:100px 0 140px;border-top:1px solid var(--line);background:var(--bg-2);}
#wdi-ux-page .prc-grid{display:block;}
#wdi-ux-page .prc-tag{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink-2);margin-bottom:24px;}
#wdi-ux-page .prc-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rose-500);box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .prc-body{min-width:0;}
#wdi-ux-page .prc-h{font-size:clamp(36px,4vw,60px);line-height:1;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;max-width:22ch;}
#wdi-ux-page .prc-sub{margin-top:24px;font-size:clamp(15px,1.25vw,17.5px);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:74ch;}

#wdi-ux-page .prc-cells{margin-top:72px;display:grid;grid-template-columns:repeat(6,1fr);column-gap:32px;row-gap:60px;}
#wdi-ux-page .prc-cell{position:relative;min-height:220px;perspective:1400px;}
#wdi-ux-page .prc-flip{position:relative;width:100%;height:100%;min-height:220px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .prc-cell:hover .prc-flip,#wdi-ux-page .prc-cell:focus-within .prc-flip{transform:rotateY(180deg);}
#wdi-ux-page .prc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;border-left:1px solid var(--line-2);padding-left:20px;}
#wdi-ux-page .prc-back{transform:rotateY(180deg);padding-left:20px;border-left:1px solid var(--rose-300);}

#wdi-ux-page .prc-num{font-size:clamp(48px,4.4vw,68px);font-weight:400;line-height:1;letter-spacing:-0.04em;color:#B89D5A;font-feature-settings:"tnum" 1;}
#wdi-ux-page .prc-cell:nth-child(odd) .prc-num{color:var(--rose-600);}
#wdi-ux-page .prc-cell:nth-child(even) .prc-num{color:var(--rose-500);}
#wdi-ux-page .prc-title-s{margin-top:28px;font-size:18px;font-weight:500;letter-spacing:-0.02em;color:var(--ink);line-height:1.18;}
#wdi-ux-page .prc-desc-s{margin-top:12px;font-size:13px;font-weight:400;line-height:1.5;color:var(--muted);}

#wdi-ux-page .prc-back-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);margin-bottom:14px;}
#wdi-ux-page .prc-back-text{font-size:13px;font-weight:400;line-height:1.5;color:var(--ink-2);}
#wdi-ux-page .prc-back-aeo{margin-top:14px;font-size:12px;font-style:italic;color:var(--muted);padding-top:12px;border-top:1px solid var(--line);line-height:1.5;}

@media(max-width:1100px){
  #wdi-ux-page .prc-cells{grid-template-columns:repeat(3,1fr);column-gap:28px;}
}
@media(max-width:760px){
  #wdi-ux-page .prc-cells{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  #wdi-ux-page .prc-cells{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .prc-flip{transition:none;}
  #wdi-ux-page .prc-cell:hover .prc-flip{transform:none;}
  #wdi-ux-page .prc-back{display:none;}
}

/* ============================================================
   VARIANT C — Full-height step panels with photo on the right
   ============================================================ */
#wdi-ux-page .prd-sec{position:relative;padding:100px 0 160px;border-top:1px solid var(--line);background:var(--bg-2);}
#wdi-ux-page .prd-head{display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;align-items:end;margin-bottom:60px;max-width:var(--maxw);padding:0 40px;margin-left:auto;margin-right:auto;}
#wdi-ux-page .prd-tag{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink-2);margin-bottom:22px;}
#wdi-ux-page .prd-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rose-500);box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .prd-h{font-size:clamp(40px,4.6vw,68px);line-height:1;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;max-width:22ch;}
#wdi-ux-page .prd-sub{font-size:clamp(15px,1.25vw,17.5px);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:62ch;}

#wdi-ux-page .prd-stack{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:flex;flex-direction:column;gap:28px;}
#wdi-ux-page .prd-card{
  position:sticky;
  border-radius:36px;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(11,12,14,.08);
  overflow:visible;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:min(86vh,820px);
}
#wdi-ux-page .prd-card>*{position:relative;z-index:1;}
#wdi-ux-page .prd-card:nth-child(1){top:60px;}
#wdi-ux-page .prd-card:nth-child(2){top:88px;}
#wdi-ux-page .prd-card:nth-child(3){top:116px;}
#wdi-ux-page .prd-card:nth-child(4){top:144px;}
#wdi-ux-page .prd-card:nth-child(5){top:172px;}
#wdi-ux-page .prd-card:nth-child(6){top:200px;}

#wdi-ux-page .prd-card.is-dark{background:#0E0F12;color:#fff;border-color:#1B1D22;}
#wdi-ux-page .prd-card{position:sticky;z-index:1;}
@keyframes prdGlowSpin{to{transform:rotate(360deg);}}

/* Ambient pink + purple glow in the section BACKGROUND — only when AI card is on screen */
#wdi-ux-page .prd-aura{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s ease;
}
#wdi-ux-page .prd-aura span{position:absolute;border-radius:50%;filter:blur(90px);}
#wdi-ux-page .prd-aura .a{
  width:62vw;height:62vh;left:28%;top:20%;
  background:radial-gradient(circle,rgba(249,47,100,.45),transparent 72%);
  animation:prdGlowSpin 18s linear infinite;
}
#wdi-ux-page .prd-aura .b{
  width:50vw;height:50vh;right:18%;bottom:14%;
  background:radial-gradient(circle,rgba(122,0,255,.50),transparent 72%);
  animation:prdGlowSpin 22s linear infinite reverse;
}
#wdi-ux-page .prd-aura .c{
  width:40vw;height:40vh;left:8%;bottom:18%;
  background:radial-gradient(circle,rgba(253,59,111,.30),transparent 70%);
  animation:prdGlowSpin 26s linear infinite;
}
#wdi-ux-page .prd-sec.show-aura .prd-aura{opacity:1;}
/* AI title — sub-second zap of pink + purple */
#wdi-ux-page .prd-card.is-dark .prd-title.flash{
  background:linear-gradient(90deg,#FD3B6F,#7A00FF,#FD3B6F);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:prdTitleZap .85s ease-out forwards;
}
@keyframes prdTitleZap{
  0%{background-position:220% 0;filter:drop-shadow(0 0 18px rgba(249,47,100,.85)) brightness(1.4);}
  100%{background-position:0 0;filter:drop-shadow(0 0 0 rgba(249,47,100,0)) brightness(1);}
}
#wdi-ux-page .prd-card.is-dark .prd-label{color:var(--rose-300);}
#wdi-ux-page .prd-card.is-dark .prd-title{color:#fff;}
#wdi-ux-page .prd-card.is-dark .prd-desc{color:rgba(255,255,255,.78);}
#wdi-ux-page .prd-card.is-dark .prd-li{color:#fff;}
#wdi-ux-page .prd-card.is-dark .prd-aeo{color:rgba(255,255,255,.7);border-left-color:var(--rose-300);}
#wdi-ux-page .prd-card.is-dark .prd-cta{background:#fff;color:var(--ink);}
#wdi-ux-page .prd-card.is-dark .prd-cta:hover{background:var(--rose-500);color:#fff;}

#wdi-ux-page .prd-left{padding:60px 56px;display:flex;flex-direction:column;justify-content:center;}
#wdi-ux-page .prd-label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-600);margin-bottom:24px;}
#wdi-ux-page .prd-label .sep{margin:0 10px;color:var(--rose-300);}
#wdi-ux-page .prd-title{font-size:clamp(40px,4.6vw,64px);font-weight:500;letter-spacing:-0.035em;line-height:1;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .prd-desc{margin-top:24px;font-size:clamp(16px,1.35vw,19px);line-height:1.5;font-weight:400;color:var(--ink-2);max-width:42ch;}
#wdi-ux-page .prd-list{margin-top:32px;display:flex;flex-direction:column;gap:12px;}
#wdi-ux-page .prd-li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:15px;font-weight:400;line-height:1.45;color:var(--ink);}
#wdi-ux-page .prd-check{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid currentColor;color:var(--rose-600);opacity:.85;}
#wdi-ux-page .prd-check svg{width:13px;height:13px;}
#wdi-ux-page .prd-aeo{margin-top:26px;padding-left:18px;border-left:3px solid var(--rose-500);font-size:14px;font-style:italic;color:var(--muted);line-height:1.55;max-width:48ch;}
#wdi-ux-page .prd-cta{margin-top:36px;display:inline-flex;width:fit-content;align-items:center;gap:9px;font-family:var(--font);font-size:15px;font-weight:500;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:16px 26px;text-decoration:none;cursor:pointer;transition:transform .25s,background .25s,box-shadow .3s;}
#wdi-ux-page .prd-cta svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .prd-cta:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(228,18,82,.28);}
#wdi-ux-page .prd-cta:hover svg{transform:translateX(3px);}

#wdi-ux-page .prd-right{position:relative;background:#0c0d11;overflow:hidden;border-radius:0 36px 36px 0;}
#wdi-ux-page .prd-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
#wdi-ux-page .prd-right::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,12,14,.1),rgba(11,12,14,.45));pointer-events:none;}
#wdi-ux-page .prd-right::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.18) 100%);}

@media(max-width:1000px){
  #wdi-ux-page .prd-head{grid-template-columns:1fr;gap:24px;padding:0 22px;}
  #wdi-ux-page .prd-stack{padding:0 22px;}
  #wdi-ux-page .prd-card{grid-template-columns:1fr;min-height:0;}
  #wdi-ux-page .prd-right{min-height:340px;}
  #wdi-ux-page .prd-left{padding:40px 32px;}
}
@media(max-width:760px){
  #wdi-ux-page .prd-sec{padding:70px 0 100px;}
  #wdi-ux-page .prd-left{padding:32px 24px;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .prd-card{transition:none;}
}

/* ============================================================
   WDI — Use Cases (light) — 3 variants + the WDI Spark mascot
   ============================================================ */
#wdi-ux-page {
  --rose-700: #C40F46;
  --rose-600: #E41252;
  --rose-500: #F92F64;
  --rose-400: #FD3B6F;
  --rose-300: #FF6F92;
  --ink:    #0B0C0E;
  --ink-2:  #41454C;
  --muted:  #717680;
  --faint:  #9AA0A8;
  --bg:     #FFFFFF;
  --bg-2:   #FBFBFC;
  --line:   #ECEDF0;
  --line-2: #E3E4E8;
  --rose-soft: rgba(249, 47, 100, 0.10);
  --font: "Google Sans Flex", "Google Sans", "Product Sans", var(--font-figtree), system-ui, -apple-system, sans-serif;
  --maxw: 1240px;
}
#wdi-ux-page * { margin: 0; padding: 0; box-sizing: border-box; }
#wdi-ux-page { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
#wdi-ux-page { font-family: var(--font); color: var(--ink); background: var(--bg); overflow-x:clip; }
#wdi-ux-page .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* variant tag chrome (dev aid, shared) */
#wdi-ux-page .uc-vtag { max-width: var(--maxw); margin: 0 auto; padding: 26px 40px 0; font-size: 13.5px; color: var(--muted); }
#wdi-ux-page .uc-vtag b { color: var(--ink); font-weight: 500; }
#wdi-ux-page .uc-vtag .pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ink); border-radius: 999px; padding: 4px 11px; margin-right: 8px; }

/* ---- shared section header ---- */
#wdi-ux-page .uc-sec { position: relative; padding: 100px 0 112px; background: var(--bg); border-top: 1px solid var(--line); }
#wdi-ux-page .uc-sec.alt { background: var(--bg-2); }
#wdi-ux-page .uc-head { max-width: 880px; }
#wdi-ux-page .uc-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-600); }
#wdi-ux-page .uc-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, var(--rose-600), var(--rose-400)); box-shadow: 0 0 10px rgba(249,47,100,.5); }
#wdi-ux-page .uc-h { margin-top: 20px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
#wdi-ux-page .uc-sub { margin-top: 18px; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6; font-weight: 300; color: var(--ink-2); text-wrap: pretty; }
#wdi-ux-page .uc-seo { margin-top: 14px; font-size: 14.5px; line-height: 1.65; font-weight: 400; color: var(--muted); max-width: 74ch; }

/* ---- shared bits ---- */
#wdi-ux-page .uc-pill { font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; white-space: nowrap; transition: border-color .25s ease, background .25s ease, color .25s ease; }
#wdi-ux-page .uc-btn-dark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-size: 14.5px; font-weight: 500; color: #fff; background: var(--ink); border: none; border-radius: 999px; padding: 14px 22px; text-decoration: none; cursor: pointer; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
#wdi-ux-page .uc-btn-dark svg { width: 16px; height: 16px; transition: transform .25s ease; }
#wdi-ux-page .uc-btn-dark:hover { background: var(--rose-600); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(228,18,82,.24); }
#wdi-ux-page .uc-btn-dark:hover svg { transform: translateX(3px); }
#wdi-ux-page .uc-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; transition: gap .25s ease, color .25s ease; }
#wdi-ux-page .uc-link svg { width: 15px; height: 15px; color: var(--rose-600); transition: transform .25s ease; }
#wdi-ux-page .uc-link:hover { color: var(--rose-600); gap: 11px; }

/* ============================================================
   VARIATION A — BIG IMPACTFUL ALTERNATING FEATURE ROWS
   ============================================================ */
#wdi-ux-page .uca-rows { margin-top: 64px; display: flex; flex-direction: column; gap: 30px; }
#wdi-ux-page .uca-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  /* scroll reveal */
  transform: translateY(34px);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page #usecases-a.in .uca-row { transform: none; transition-delay: var(--d); }
#wdi-ux-page .uca-row.flip .uca-visual { order: 2; }

/* big abstract visual panel */
#wdi-ux-page .uca-visual {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 4 / 3.05;
  background: #0a0b0e;
  border: 1px solid #15171d;
  box-shadow: 0 30px 70px rgba(11,12,14,.14);
}
#wdi-ux-page .uca-mesh { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .uca-row:hover .uca-mesh { transform: scale(1.06); }
#wdi-ux-page .uca-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(85% 85% at 70% 30%, #000, transparent 84%);
          mask-image: radial-gradient(85% 85% at 70% 30%, #000, transparent 84%);
}
#wdi-ux-page .uca-bignum {
  position: absolute; left: 34px; top: 22px;
  font-size: 120px; font-weight: 300; line-height: 1; letter-spacing: -0.05em;
  color: rgba(255,255,255,.13); font-feature-settings: "tnum" 1;
}
#wdi-ux-page .uca-vico {
  position: absolute; right: 30px; top: 32px;
  width: 56px; height: 56px; color: #fff; opacity: .95;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.4));
}
#wdi-ux-page .uca-vico svg { width: 100%; height: 100%; }
#wdi-ux-page .uca-vtags { position: absolute; left: 30px; right: 30px; bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
#wdi-ux-page .uca-vtag-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 13px; backdrop-filter: blur(6px); }
#wdi-ux-page .uca-vtag-pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--rose-400); box-shadow: 0 0 8px var(--rose-400); }
#wdi-ux-page .uca-vtag-pill.ghost { color: rgba(255,255,255,.78); }

/* content side */
#wdi-ux-page .uca-content { min-width: 0; }
#wdi-ux-page .uca-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-600); }
#wdi-ux-page .uca-title { margin-top: 12px; font-size: clamp(24px, 2.5vw, 33px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); text-wrap: balance; }
#wdi-ux-page .uca-scenario { margin-top: 16px; font-size: 16.5px; font-weight: 400; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
#wdi-ux-page .uca-steps { margin-top: 24px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
#wdi-ux-page .uca-step { display: grid; grid-template-columns: 124px 1fr; gap: 22px; padding: 15px 0; border-bottom: 1px solid var(--line); }
#wdi-ux-page .uca-step-label { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
#wdi-ux-page .uca-step p { font-size: 14px; font-weight: 300; line-height: 1.58; color: var(--ink-2); }
#wdi-ux-page .uca-step.is-out .uca-step-label { color: var(--rose-600); }
#wdi-ux-page .uca-step.is-out p { color: var(--ink); font-weight: 400; }
#wdi-ux-page .uca-services { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
#wdi-ux-page .uca-content .uc-btn-dark { margin-top: 24px; }

/* ============================================================
   VARIATION B — SUBTLE QUIET EDITORIAL SPREAD
   ============================================================ */
#wdi-ux-page .ucb-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; }
#wdi-ux-page .ucb-cell {
  padding: 36px 0;
  border-top: 1px solid var(--line);
  transform: translateY(20px);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page #usecases-b.in .ucb-cell { transform: none; transition-delay: var(--d); }
/* keep the two columns' top rule aligned: first two cells form row 1 */
#wdi-ux-page .ucb-top { display: flex; align-items: center; justify-content: space-between; }
#wdi-ux-page .ucb-num { font-size: 32px; font-weight: 300; letter-spacing: -0.04em; color: #DCDEE3; font-feature-settings: "tnum" 1; transition: color .35s ease; }
#wdi-ux-page .ucb-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); transition: all .35s ease; }
#wdi-ux-page .ucb-ico svg { width: 19px; height: 19px; }
#wdi-ux-page .ucb-cell:hover .ucb-num { color: var(--rose-500); }
#wdi-ux-page .ucb-cell:hover .ucb-ico { background: var(--rose-soft); border-color: transparent; color: var(--rose-600); }
#wdi-ux-page .ucb-title { margin-top: 18px; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink); text-wrap: balance; }
#wdi-ux-page .ucb-scenario { margin-top: 11px; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: var(--muted); }
#wdi-ux-page .ucb-detail { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
#wdi-ux-page .ucb-line { font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--ink-2); padding-left: 14px; position: relative; }
#wdi-ux-page .ucb-line::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--line-2); }
#wdi-ux-page .ucb-line.is-out::before { background: linear-gradient(180deg, var(--rose-500), var(--rose-400)); }
#wdi-ux-page .ucb-l { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
#wdi-ux-page .ucb-line.is-out .ucb-l { color: var(--rose-600); }
#wdi-ux-page .ucb-foot { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
#wdi-ux-page .ucb-svc { font-size: 12px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#wdi-ux-page .ucb-svc i { color: var(--line-2); font-style: normal; }

/* ============================================================
   VARIATION C — MASCOT-GUIDED STICKY RAIL + LIST (WDI Spark)
   ============================================================ */
#wdi-ux-page .ucc-wrap { margin-top: 56px; display: grid; grid-template-columns: 0.92fr 1.28fr; gap: 30px; align-items: start; }

/* left sticky mascot panel */
#wdi-ux-page .ucc-panel {
  position: sticky; top: 40px;
  border-radius: 26px;
  padding: 34px 32px 32px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(249,47,100,.07), transparent 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(122,0,255,.06), transparent 60%),
    var(--bg-2);
  border: 1px solid var(--line);
  transform: translateY(22px);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page #usecases-c.in .ucc-panel { transform: none; }
#wdi-ux-page .ucc-spark { display: flex; justify-content: center; margin-bottom: 8px; }
#wdi-ux-page .ucc-bubble { position: relative; }
#wdi-ux-page .ucc-bubble-tag { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-600); background: var(--rose-soft); border-radius: 999px; padding: 5px 11px; }
#wdi-ux-page .ucc-bubble-title { margin-top: 14px; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink); transition: opacity .4s ease; }
#wdi-ux-page .ucc-bubble-text { margin-top: 10px; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
#wdi-ux-page .ucc-bubble-out { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
#wdi-ux-page .ucc-out-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rose-600); margin-bottom: 6px; }
#wdi-ux-page .ucc-bubble-out p { font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--ink); }
#wdi-ux-page .ucc-bubble-svc { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
#wdi-ux-page .ucc-bubble .uc-btn-dark { margin-top: 18px; width: 100%; justify-content: center; }
#wdi-ux-page .ucc-bubble.pulse { animation: uccPulse .5s ease; }
@keyframes uccPulse { 0% { transform: translateY(6px); } 100% { transform: none; } }

/* right list */
#wdi-ux-page .ucc-list { display: flex; flex-direction: column; gap: 12px; }
#wdi-ux-page .ucc-row {
  display: grid; grid-template-columns: 46px 1fr 28px; align-items: center; gap: 18px;
  width: 100%; text-align: left; font-family: var(--font); cursor: pointer;
  padding: 22px 24px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
#wdi-ux-page .ucc-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--rose-soft); color: var(--rose-600); transition: background .3s ease, color .3s ease; }
#wdi-ux-page .ucc-ico svg { width: 23px; height: 23px; }
#wdi-ux-page .ucc-main { min-width: 0; display: block; }
#wdi-ux-page .ucc-num { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--faint); text-transform: uppercase; }
#wdi-ux-page .ucc-title2 { display: block; margin-top: 4px; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); line-height: 1.2; }
#wdi-ux-page .ucc-scenario { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--muted); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .4s ease, margin-top .4s ease; }
#wdi-ux-page .ucc-chev { width: 28px; height: 28px; display: grid; place-items: center; color: var(--faint); transition: transform .3s ease, color .3s ease; }
#wdi-ux-page .ucc-chev svg { width: 17px; height: 17px; }
#wdi-ux-page .ucc-row:hover { border-color: var(--rose-300); transform: translateX(2px); }
#wdi-ux-page .ucc-row.active { border-color: var(--rose-300); box-shadow: 0 12px 34px rgba(11,12,14,.07); }
#wdi-ux-page .ucc-row.active .ucc-ico { background: linear-gradient(135deg, var(--rose-600), var(--rose-400)); color: #fff; }
#wdi-ux-page .ucc-row.active .ucc-scenario { max-height: 80px; opacity: 1; margin-top: 9px; }
#wdi-ux-page .ucc-row.active .ucc-chev { color: var(--rose-600); transform: translateX(3px); }

/* ---- the Spark mascot ---- */
#wdi-ux-page .spark { display: block; overflow: visible; }
#wdi-ux-page .spark-shadow { fill: rgba(11,12,14,.10); }
#wdi-ux-page .spark-aura { animation: sparkAura 4s ease-in-out infinite; transform-origin: 70px 68px; }
@keyframes sparkAura { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
#wdi-ux-page .spark-visor { fill: #1a0a12; }
#wdi-ux-page .spark-pupil { fill: #FF6F92; }
#wdi-ux-page .spark-pupil-hi { fill: #fff; }
#wdi-ux-page .spark-orbit { fill: #fff; opacity: .9; animation: sparkOrbit 6s linear infinite; transform-origin: 70px 70px; }
@keyframes sparkOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- section-level CTA (shared, used at end of section A) ---- */
#wdi-ux-page .uc-cta { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: 38px 40px; border: 1px solid var(--line); border-radius: 24px; position: relative; overflow: hidden; background: radial-gradient(120% 180% at 100% 0%, rgba(249,47,100,.07), transparent 58%), var(--bg-2); }
#wdi-ux-page .uc-cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--rose-600), var(--rose-400) 55%, #7A00FF); }
#wdi-ux-page .uc-cta-h { font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
#wdi-ux-page .uc-cta-p { margin-top: 10px; font-size: 15px; line-height: 1.55; font-weight: 300; color: var(--ink-2); max-width: 60ch; }
#wdi-ux-page .uc-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
#wdi-ux-page .uc-cta-secondary { display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 500; color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 14px 22px; text-decoration: none; transition: border-color .25s ease, transform .25s ease; }
#wdi-ux-page .uc-cta-secondary:hover { border-color: var(--rose-300); transform: translateY(-2px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  #wdi-ux-page .uca-row, #wdi-ux-page .uca-row.flip { grid-template-columns: 1fr; gap: 26px; }
  #wdi-ux-page .uca-row .uca-visual, #wdi-ux-page .uca-row.flip .uca-visual { order: -1; }
  #wdi-ux-page .uca-visual { aspect-ratio: 16 / 10; }
  #wdi-ux-page .ucb-grid { grid-template-columns: 1fr; gap: 0; }
  #wdi-ux-page .ucc-wrap { grid-template-columns: 1fr; }
  #wdi-ux-page .ucc-panel { position: relative; top: 0; order: -1; }
}
@media (max-width: 760px) {
  #wdi-ux-page .wrap { padding: 0 22px; }
  #wdi-ux-page .uc-vtag { padding: 22px 22px 0; }
  #wdi-ux-page .uc-sec { padding: 70px 0 80px; }
  #wdi-ux-page .uca-step { grid-template-columns: 1fr; gap: 4px; }
  #wdi-ux-page .uca-bignum { font-size: 84px; }
  #wdi-ux-page .uc-cta { padding: 26px; gap: 20px; }
  #wdi-ux-page .uc-cta-actions { width: 100%; }
  #wdi-ux-page .uc-cta .uc-btn-dark, #wdi-ux-page .uc-cta-secondary { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #wdi-ux-page .uca-row, #wdi-ux-page .ucb-cell, #wdi-ux-page .ucc-panel { transform: none !important; }
  #wdi-ux-page .uca-mesh, #wdi-ux-page .spark-aura, #wdi-ux-page .spark-orbit { transition: none; animation: none; }
}

/* ============================================================
   WDI — Challenges We Solve  (dark immersive diagnostic block)
   Reuses the established WDI system: rose accent, Google Sans /
   Figtree, AI conic-aura language. This section is intentionally
   dark — the lucrative, click-forward focal point of the page.
   ============================================================ */
#wdi-ux-page {
  --rose-700: #C40F46;
  --rose-600: #E41252;
  --rose-500: #F92F64;
  --rose-400: #FD3B6F;
  --rose-300: #FF6F92;

  --ink:    #0B0C0E;
  --ink-2:  #41454C;
  --muted:  #717680;
  --faint:  #9AA0A8;

  --bg:     #FFFFFF;
  --bg-2:   #FBFBFC;
  --line:   #ECEDF0;
  --line-2: #E3E4E8;
  --rose-soft: rgba(249, 47, 100, 0.10);

  --font: "Google Sans Flex", "Google Sans", "Product Sans", var(--font-figtree), system-ui, -apple-system, sans-serif;
  --maxw: 1240px;
}
#wdi-ux-page * { margin: 0; padding: 0; box-sizing: border-box; }
#wdi-ux-page { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#wdi-ux-page { font-family: var(--font); color: var(--ink); background: var(--bg); overflow-x:clip; }
#wdi-ux-page .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; }

/* ============================================================
   SECTION SHELL — full-bleed dark canvas
   ============================================================ */
#wdi-ux-page .chal {
  position: relative;
  padding: 116px 0 124px;
  background:
    radial-gradient(140% 90% at 50% -10%, #15161C 0%, #0A0B0E 45%, #08090C 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* dotted reactive canvas */
#wdi-ux-page #chalDots {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* ambient drifting orbs */
#wdi-ux-page .chal-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#wdi-ux-page .chal-amb span {
  position: absolute; border-radius: 50%; filter: blur(70px);
}
#wdi-ux-page .chal-amb .a { width: 620px; height: 620px; top: -240px; right: -120px;
  background: radial-gradient(circle, rgba(249,47,100,.20), transparent 65%);
  animation: chalDrift1 20s ease-in-out infinite alternate; }
#wdi-ux-page .chal-amb .b { width: 540px; height: 540px; bottom: -240px; left: -140px;
  background: radial-gradient(circle, rgba(122,0,255,.18), transparent 65%);
  animation: chalDrift2 24s ease-in-out infinite alternate; }
#wdi-ux-page .chal-amb .c { width: 420px; height: 420px; top: 38%; left: 44%;
  background: radial-gradient(circle, rgba(0,184,212,.10), transparent 65%);
  animation: chalDrift1 28s ease-in-out infinite alternate; }
@keyframes chalDrift1 { to { transform: translate(-50px, 50px) scale(1.08); } }
@keyframes chalDrift2 { to { transform: translate(54px, -40px) scale(1.1); } }

/* slow scan-line sweep */
#wdi-ux-page .chal-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden;
}
#wdi-ux-page .chal-scan::before {
  content: ""; position: absolute; left: 0; right: 0; height: 220px; top: -220px;
  background: linear-gradient(180deg, transparent, rgba(249,47,100,.05) 45%, rgba(255,111,146,.10) 50%, rgba(249,47,100,.05) 55%, transparent);
  animation: chalScan 9s linear infinite;
}
@keyframes chalScan { to { transform: translateY(calc(100vh + 440px)); } }

/* ============================================================
   HEADER (inverted)
   ============================================================ */
#wdi-ux-page .chal-head { max-width: 880px; }
#wdi-ux-page .chal-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rose-300);
}
#wdi-ux-page .chal-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: linear-gradient(135deg, var(--rose-500), var(--rose-300));
  box-shadow: 0 0 12px rgba(249,47,100,.7);
}
#wdi-ux-page .chal-h {
  margin-top: 20px; font-size: clamp(30px, 4vw, 52px); line-height: 1.05;
  font-weight: 500; letter-spacing: -0.035em; color: #fff; text-wrap: balance;
}
#wdi-ux-page .chal-intro {
  margin-top: 20px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6;
  font-weight: 300; color: rgba(255,255,255,.82); max-width: 68ch; text-wrap: pretty;
}
#wdi-ux-page .chal-seo {
  margin-top: 14px; font-size: 14.5px; line-height: 1.65; font-weight: 400;
  color: rgba(255,255,255,.55); max-width: 78ch;
}

/* ============================================================
   CARD GRID
   ============================================================ */
#wdi-ux-page .chal-grid {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
#wdi-ux-page .chal-card {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
  padding: 30px 28px 26px;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font-family: var(--font);
  min-height: 268px;
  display: flex;
  flex-direction: column;
  /* scroll reveal — transform only so it never resolves invisible */
  transform: translateY(30px);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
#wdi-ux-page .chal.in .chal-card { transform: none; transition-delay: var(--d, 0s); }

/* gradient edge glow on hover */
#wdi-ux-page .chal-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(249,47,100,.7), rgba(122,0,255,.5) 55%, rgba(0,184,212,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
/* cursor-follow radial */
#wdi-ux-page .chal-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(249,47,100,.14), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
}
#wdi-ux-page .chal-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
#wdi-ux-page .chal.in .chal-card:hover { transform: translateY(-4px); }
#wdi-ux-page .chal-card:hover::before { opacity: 1; }
#wdi-ux-page .chal-card:hover::after { opacity: 1; }

#wdi-ux-page .chal-card-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
#wdi-ux-page .chal-ico {
  width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px;
  background: rgba(249,47,100,.14); color: var(--rose-300);
  transition: background .4s ease, color .4s ease, transform .4s ease;
}
#wdi-ux-page .chal-ico svg { width: 25px; height: 25px; }
#wdi-ux-page .chal-card:hover .chal-ico { background: linear-gradient(135deg, var(--rose-500), var(--rose-400)); color: #fff; transform: scale(1.06); }
#wdi-ux-page .chal-num {
  font-size: 30px; font-weight: 300; letter-spacing: -0.04em;
  color: rgba(255,255,255,.28); font-feature-settings: "tnum" 1;
  transition: color .4s ease;
}
#wdi-ux-page .chal-card:hover .chal-num { color: rgba(255,255,255,.5); }

#wdi-ux-page .chal-title {
  position: relative; z-index: 2;
  margin-top: 20px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.16; color: #fff; text-wrap: balance;
}
#wdi-ux-page .chal-hook {
  position: relative; z-index: 2;
  margin-top: 10px; font-size: 14px; font-weight: 300; line-height: 1.5;
  color: rgba(255,255,255,.66);
}
#wdi-ux-page .chal-symp {
  position: relative; z-index: 2;
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px;
}
#wdi-ux-page .chal-chip {
  font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
#wdi-ux-page .chal-open {
  position: relative; z-index: 2;
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em;
  color: #fff; white-space: nowrap;
}
#wdi-ux-page .chal-open .ar {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-600), var(--rose-400));
  transition: transform .3s ease;
}
#wdi-ux-page .chal-open .ar svg { width: 14px; height: 14px; }
#wdi-ux-page .chal-card:hover .chal-open .ar { transform: translateX(3px) scale(1.06); }

/* AI card — ambient conic aura */
#wdi-ux-page .chal-card.is-ai .ai-aura {
  position: absolute; inset: -45%;
  background: conic-gradient(from 0deg, #F92F64, #7A00FF, #00E5FF, #FFB300, #F92F64);
  filter: blur(50px); opacity: .22; z-index: 0;
  animation: aispin 14s linear infinite;
}
@keyframes aispin { to { transform: rotate(360deg); } }
#wdi-ux-page .chal-card.is-ai:hover .ai-aura { opacity: .34; }
#wdi-ux-page .chal-card.is-ai .chal-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); color: #fff; }

/* ============================================================
   EXPAND OVERLAY (the "diagnosis")
   ============================================================ */
#wdi-ux-page .chal-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: none;
  align-items: center; justify-content: center;
  padding: 28px;
}
#wdi-ux-page .chal-overlay.open { display: flex; }
#wdi-ux-page .chal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,7,9,.66);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .4s ease;
}
#wdi-ux-page .chal-overlay.show .chal-backdrop { opacity: 1; }

#wdi-ux-page .chal-modal {
  position: relative;
  width: min(960px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 26px;
  background: linear-gradient(180deg, #121319, #0C0D11);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
  /* enter animation */
  transform: translateY(22px) scale(.97);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
#wdi-ux-page .chal-overlay.show .chal-modal { transform: none; opacity: 1; }
#wdi-ux-page .chal-modal::-webkit-scrollbar { width: 10px; }
#wdi-ux-page .chal-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }

/* modal top banner */
#wdi-ux-page .chal-modal-head {
  position: relative;
  padding: 38px 44px 30px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
#wdi-ux-page .chal-modal-mesh {
  position: absolute; inset: 0; z-index: 0; opacity: .9;
}
#wdi-ux-page .chal-modal-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(80% 100% at 80% 0%, #000, transparent 80%);
          mask-image: radial-gradient(80% 100% at 80% 0%, #000, transparent 80%);
}
#wdi-ux-page .chal-modal-head-row { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; }
#wdi-ux-page .chal-modal-ico {
  width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 15px;
  background: linear-gradient(135deg, var(--rose-600), var(--rose-400)); color: #fff;
  box-shadow: 0 10px 30px rgba(228,18,82,.35);
}
#wdi-ux-page .chal-modal-ico svg { width: 27px; height: 27px; }
#wdi-ux-page .chal-modal.is-ai .chal-modal-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); }
#wdi-ux-page .chal-modal-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-300); }
#wdi-ux-page .chal-modal-title { margin-top: 7px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; color: #fff; }
#wdi-ux-page .chal-modal-hook {
  position: relative; z-index: 2;
  margin-top: 18px; font-size: 16.5px; font-weight: 400; line-height: 1.5;
  color: rgba(255,255,255,.9); max-width: 60ch;
}

#wdi-ux-page .chal-close {
  position: absolute; top: 22px; right: 22px; z-index: 5;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  transition: background .25s ease, transform .25s ease, color .25s ease;
}
#wdi-ux-page .chal-close:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); color: #fff; }
#wdi-ux-page .chal-close svg { width: 18px; height: 18px; }

/* modal body */
#wdi-ux-page .chal-modal-body { padding: 32px 44px 40px; }
#wdi-ux-page .chal-desc { font-size: 15.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.74); max-width: 74ch; }

#wdi-ux-page .chal-blocks {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
#wdi-ux-page .chal-block {
  border-radius: 16px; padding: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
}
#wdi-ux-page .chal-block.span2 { grid-column: span 2; }
#wdi-ux-page .chal-block.is-help {
  background: linear-gradient(140deg, rgba(249,47,100,.14), rgba(122,0,255,.10));
  border-color: rgba(249,47,100,.32);
}
#wdi-ux-page .chal-block-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 12px;
}
#wdi-ux-page .chal-block-label .dot { width: 6px; height: 6px; border-radius: 50%; }
#wdi-ux-page .chal-block.is-symp .chal-block-label { color: #FFB37A; }
#wdi-ux-page .chal-block.is-symp .dot { background: #FF9A52; box-shadow: 0 0 8px rgba(255,154,82,.7); }
#wdi-ux-page .chal-block.is-impact .chal-block-label { color: #FF7A9C; }
#wdi-ux-page .chal-block.is-impact .dot { background: var(--rose-400); box-shadow: 0 0 8px rgba(249,47,100,.7); }
#wdi-ux-page .chal-block.is-help .chal-block-label { color: #fff; }
#wdi-ux-page .chal-block.is-help .dot { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8); }
#wdi-ux-page .chal-block-text { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.82); }
#wdi-ux-page .chal-block.is-help .chal-block-text { color: rgba(255,255,255,.92); font-weight: 400; }

/* relevant services */
#wdi-ux-page .chal-services { margin-top: 26px; }
#wdi-ux-page .chal-services-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 12px; }
#wdi-ux-page .chal-svc-list { display: flex; flex-wrap: wrap; gap: 9px; }
#wdi-ux-page .chal-svc {
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  color: #fff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 15px;
  text-decoration: none; transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
#wdi-ux-page .chal-svc:hover { border-color: var(--rose-300); background: rgba(249,47,100,.14); transform: translateY(-2px); }

#wdi-ux-page .chal-modal-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
#wdi-ux-page .chal-modal-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
  padding: 14px 22px; border-radius: 999px; cursor: pointer; text-decoration: none;
  color: #0B0C0E; background: #fff; border: 1px solid #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
#wdi-ux-page .chal-modal-btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
#wdi-ux-page .chal-modal-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,255,255,.18); }
#wdi-ux-page .chal-modal-btn:hover svg { transform: translateX(3px); }

/* staggered reveal of modal body blocks (transform-only) */
#wdi-ux-page .chal-fx { transform: translateY(14px); }
#wdi-ux-page .chal-overlay.show .chal-fx { transform: none; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .chal-overlay.show .chal-desc.chal-fx { transition-delay: .08s; }
#wdi-ux-page .chal-overlay.show .chal-blocks.chal-fx { transition-delay: .14s; }
#wdi-ux-page .chal-overlay.show .chal-services.chal-fx { transition-delay: .20s; }
#wdi-ux-page .chal-overlay.show .chal-modal-cta.chal-fx { transition-delay: .26s; }

/* ============================================================
   SECTION CTA
   ============================================================ */
#wdi-ux-page .chal-cta {
  position: relative; z-index: 2;
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  padding: 38px 42px; border-radius: 24px;
  background: linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12); overflow: hidden;
}
#wdi-ux-page .chal-cta::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--rose-500), var(--rose-400) 55%, #7A00FF);
}
#wdi-ux-page .chal-cta-h { font-size: clamp(21px, 2.1vw, 27px); font-weight: 500; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
#wdi-ux-page .chal-cta-p { margin-top: 10px; font-size: 15px; line-height: 1.55; font-weight: 300; color: rgba(255,255,255,.72); max-width: 62ch; text-wrap: pretty; }
#wdi-ux-page .chal-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
#wdi-ux-page .chal-cta-primary, #wdi-ux-page .chal-cta-secondary {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  border-radius: 999px; padding: 15px 24px; text-decoration: none; white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
#wdi-ux-page .chal-cta-primary { color: #0B0C0E; background: #fff; border: 1px solid #fff; }
#wdi-ux-page .chal-cta-primary svg { width: 17px; height: 17px; transition: transform .25s ease; }
#wdi-ux-page .chal-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,255,255,.22); }
#wdi-ux-page .chal-cta-primary:hover svg { transform: translateX(3px); }
#wdi-ux-page .chal-cta-secondary { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.26); }
#wdi-ux-page .chal-cta-secondary:hover { border-color: var(--rose-300); background: rgba(249,47,100,.12); transform: translateY(-2px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  #wdi-ux-page .chal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  #wdi-ux-page .wrap { padding: 0 22px; }
  #wdi-ux-page .chal { padding: 78px 0 86px; }
  #wdi-ux-page .chal-grid { grid-template-columns: 1fr; }
  #wdi-ux-page .chal-modal-head { padding: 30px 24px 26px; }
  #wdi-ux-page .chal-modal-body { padding: 26px 24px 32px; }
  #wdi-ux-page .chal-blocks { grid-template-columns: 1fr; }
  #wdi-ux-page .chal-block.span2 { grid-column: span 1; }
  #wdi-ux-page .chal-cta { padding: 26px; gap: 20px; }
  #wdi-ux-page .chal-cta-actions { width: 100%; }
  #wdi-ux-page .chal-cta-primary, #wdi-ux-page .chal-cta-secondary { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #wdi-ux-page .chal-amb span, #wdi-ux-page .chal-scan::before, #wdi-ux-page .chal-card.is-ai .ai-aura { animation: none; }
  #wdi-ux-page .chal-card { transform: none; }
  #wdi-ux-page .chal-modal { transition: opacity .3s ease; transform: none; }
  #wdi-ux-page .chal-fx { transform: none; }
}

/* ============================================================
   VARIANT LABEL (page scaffolding only)
   ============================================================ */
#wdi-ux-page .chal-vtag {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: var(--maxw); margin: 0 auto; padding: 0 40px 26px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.6);
}
#wdi-ux-page .chal-vtag b { color: #fff; font-weight: 600; }
#wdi-ux-page .chal-vtag .pill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #0B0C0E; background: #fff; border-radius: 999px; padding: 4px 11px;
}

/* ============================================================
   VARIANT B — NETFLIX-STYLE PREVIEW RAIL
   ============================================================ */
#wdi-ux-page .cb-railwrap { position: relative; z-index: 2; margin-top: 50px; }
#wdi-ux-page .cb-rail {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 34px 40px 44px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#wdi-ux-page .cb-rail::-webkit-scrollbar { display: none; }

#wdi-ux-page .cb-card {
  position: relative; flex: 0 0 320px; height: 440px;
  scroll-snap-align: center;
  border-radius: 22px; overflow: hidden; cursor: pointer;
  background: #0C0D11; border: 1px solid rgba(255,255,255,.10);
  font-family: var(--font); text-align: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
  will-change: transform;
}
#wdi-ux-page .cb-poster { position: absolute; inset: 0; z-index: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .cb-poster-grid {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(70% 60% at 70% 20%, #000, transparent 78%);
          mask-image: radial-gradient(70% 60% at 70% 20%, #000, transparent 78%);
}
#wdi-ux-page .cb-scrim { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(8,9,12,.05) 30%, rgba(8,9,12,.78) 78%, rgba(8,9,12,.95)); }
#wdi-ux-page .cb-watermark { position: absolute; top: 22px; right: 18px; z-index: 2; width: 86px; height: 86px; color: rgba(255,255,255,.12); }
#wdi-ux-page .cb-watermark svg { width: 100%; height: 100%; }

#wdi-ux-page .cb-top { position: absolute; top: 24px; left: 26px; z-index: 4; display: flex; align-items: center; gap: 12px; }
#wdi-ux-page .cb-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: rgba(255,255,255,.10); color: #fff; backdrop-filter: blur(4px); transition: background .4s ease; }
#wdi-ux-page .cb-ico svg { width: 22px; height: 22px; }
#wdi-ux-page .cb-card.is-ai .cb-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); }
#wdi-ux-page .cb-num { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); font-feature-settings: "tnum" 1; }

#wdi-ux-page .cb-body { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 4; }
#wdi-ux-page .cb-title { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; color: #fff; text-wrap: balance; }
#wdi-ux-page .cb-hook { margin-top: 9px; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* preview reveal (slides up on hover) */
#wdi-ux-page .cb-preview {
  margin-top: 0; max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.2,.7,.2,1), margin-top .5s ease;
}
#wdi-ux-page .cb-preview-inner { padding-top: 16px; }
#wdi-ux-page .cb-preview-label { font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #FFB37A; margin-bottom: 9px; display: block; }
#wdi-ux-page .cb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#wdi-ux-page .cb-chip { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 9px; }
#wdi-ux-page .cb-open {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: #0B0C0E;
  background: #fff; border-radius: 999px; padding: 9px 16px;
}
#wdi-ux-page .cb-open svg { width: 15px; height: 15px; }

#wdi-ux-page .cb-card:hover {
  transform: translateY(-10px) scale(1.04); z-index: 6;
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
#wdi-ux-page .cb-card:hover .cb-poster { transform: scale(1.08); }
#wdi-ux-page .cb-card:hover .cb-preview { max-height: 220px; }
#wdi-ux-page .cb-card:hover .cb-hook { -webkit-line-clamp: 3; }

/* rail arrows */
#wdi-ux-page .cb-arrows { position: absolute; top: -64px; right: 40px; display: flex; gap: 10px; z-index: 5; }
#wdi-ux-page .cb-arrow {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, opacity .25s ease;
}
#wdi-ux-page .cb-arrow:hover { background: rgba(255,255,255,.16); border-color: var(--rose-300); }
#wdi-ux-page .cb-arrow:active { transform: scale(.94); }
#wdi-ux-page .cb-arrow svg { width: 19px; height: 19px; }
#wdi-ux-page .cb-arrow[disabled] { opacity: .3; cursor: default; pointer-events: none; }

/* edge fade masks on the rail */
#wdi-ux-page .cb-railwrap::before, #wdi-ux-page .cb-railwrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 3; pointer-events: none;
}
#wdi-ux-page .cb-railwrap::before { left: 0; background: linear-gradient(90deg, #0a0b0e, transparent); }
#wdi-ux-page .cb-railwrap::after { right: 0; background: linear-gradient(270deg, #0a0b0e, transparent); }

/* ============================================================
   VARIANT C — APPLE-STYLE SLIDES (cinematic carousel)
   ============================================================ */
#wdi-ux-page .cc-wrap { position: relative; z-index: 2; margin-top: 50px; }
#wdi-ux-page .cc-viewport { overflow: hidden; border-radius: 26px; border: 1px solid rgba(255,255,255,.1); background: #0A0B0E; }
#wdi-ux-page .cc-track { display: flex; transition: transform .7s cubic-bezier(.22,.8,.2,1); }
#wdi-ux-page .cc-slide { flex: 0 0 100%; min-width: 100%; }
#wdi-ux-page .cc-inner { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 540px; }

/* left editorial */
#wdi-ux-page .cc-left { padding: 56px 52px; display: flex; flex-direction: column; }
#wdi-ux-page .cc-eyebrow-row { display: flex; align-items: center; gap: 14px; }
#wdi-ux-page .cc-bignum { font-size: 15px; font-weight: 600; color: var(--rose-300); font-feature-settings: "tnum" 1; letter-spacing: 0.04em; }
#wdi-ux-page .cc-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
#wdi-ux-page .cc-title { margin-top: 18px; font-size: clamp(26px, 2.8vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; color: #fff; text-wrap: balance; }
#wdi-ux-page .cc-hook { margin-top: 16px; font-size: 16.5px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 44ch; }
#wdi-ux-page .cc-desc { margin-top: 12px; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 48ch; }
#wdi-ux-page .cc-services { margin-top: auto; padding-top: 26px; }
#wdi-ux-page .cc-services-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 11px; }
#wdi-ux-page .cc-svc-list { display: flex; flex-wrap: wrap; gap: 8px; }
#wdi-ux-page .cc-svc { font-size: 12.5px; font-weight: 500; color: #fff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 7px 13px; text-decoration: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease; }
#wdi-ux-page .cc-svc:hover { border-color: var(--rose-300); background: rgba(249,47,100,.14); transform: translateY(-2px); }
#wdi-ux-page .cc-cta { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-size: 14.5px; font-weight: 500; color: #0B0C0E; background: #fff; border-radius: 999px; padding: 13px 22px; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease; }
#wdi-ux-page .cc-cta svg { width: 16px; height: 16px; transition: transform .25s ease; }
#wdi-ux-page .cc-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,255,255,.2); }
#wdi-ux-page .cc-cta:hover svg { transform: translateX(3px); }

/* right visual stage */
#wdi-ux-page .cc-right { position: relative; overflow: hidden; background: #08090C; }
#wdi-ux-page .cc-mesh { position: absolute; inset: 0; z-index: 0; transition: transform .9s ease; }
#wdi-ux-page .cc-grid2 { position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px; -webkit-mask-image: radial-gradient(85% 85% at 60% 35%, #000, transparent 84%); mask-image: radial-gradient(85% 85% at 60% 35%, #000, transparent 84%); }
#wdi-ux-page .cc-bigicon { position: absolute; top: 34px; right: 34px; z-index: 2; width: 76px; height: 76px; color: rgba(255,255,255,.92); filter: drop-shadow(0 10px 30px rgba(0,0,0,.4)); }
#wdi-ux-page .cc-bigicon svg { width: 100%; height: 100%; }
#wdi-ux-page .cc-floats { position: absolute; left: 38px; right: 38px; bottom: 38px; z-index: 3; display: flex; flex-direction: column; gap: 14px; }
#wdi-ux-page .cc-float {
  border-radius: 16px; padding: 18px 20px;
  background: rgba(12,13,17,.6); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  /* per-slide reveal: transform-only */
  transform: translateY(16px);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .cc-slide.active .cc-float { transform: none; }
#wdi-ux-page .cc-slide.active .cc-float.f2 { transition-delay: .1s; }
#wdi-ux-page .cc-float-label { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 9px; }
#wdi-ux-page .cc-float-label .dot { width: 6px; height: 6px; border-radius: 50%; }
#wdi-ux-page .cc-float.is-symp .cc-float-label { color: #FFB37A; } #wdi-ux-page .cc-float.is-symp .dot { background: #FF9A52; box-shadow: 0 0 8px rgba(255,154,82,.7); }
#wdi-ux-page .cc-float.is-help .cc-float-label { color: #fff; } #wdi-ux-page .cc-float.is-help .dot { background: var(--rose-400); box-shadow: 0 0 8px rgba(249,47,100,.8); }
#wdi-ux-page .cc-float-text { font-size: 13.5px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.85); }
#wdi-ux-page .cc-float.is-help { background: linear-gradient(140deg, rgba(249,47,100,.16), rgba(122,0,255,.12)); border-color: rgba(249,47,100,.3); }
#wdi-ux-page .cc-right.is-ai .cc-bigicon { color: #fff; }

/* controls */
#wdi-ux-page .cc-controls { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#wdi-ux-page .cc-dots { display: flex; gap: 9px; }
#wdi-ux-page .cc-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.22); transition: background .3s ease, width .3s ease, border-radius .3s ease; }
#wdi-ux-page .cc-dot.active { width: 30px; border-radius: 999px; background: linear-gradient(90deg, var(--rose-500), var(--rose-400)); }
#wdi-ux-page .cc-nav { display: flex; gap: 10px; }
#wdi-ux-page .cc-arrow { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff;
  transition: background .25s ease, border-color .25s ease, transform .25s ease; }
#wdi-ux-page .cc-arrow:hover { background: rgba(255,255,255,.16); border-color: var(--rose-300); }
#wdi-ux-page .cc-arrow:active { transform: scale(.94); }
#wdi-ux-page .cc-arrow svg { width: 19px; height: 19px; }

/* autoplay progress */
#wdi-ux-page .cc-progress { position: relative; height: 2px; margin-top: 20px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
#wdi-ux-page .cc-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--rose-500), var(--rose-400) 60%, #7A00FF); }
#wdi-ux-page .cc-progress-fill.run { animation: ccfill var(--dwell, 6s) linear forwards; }
@keyframes ccfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 900px) {
  #wdi-ux-page .cc-inner { grid-template-columns: 1fr; }
  #wdi-ux-page .cc-right { min-height: 320px; order: -1; }
  #wdi-ux-page .cc-left { padding: 36px 30px; }
  #wdi-ux-page .cc-floats { position: static; margin-top: 0; padding: 24px 30px 30px; }
  #wdi-ux-page .cc-bigicon { width: 56px; height: 56px; top: 24px; right: 24px; }
}
@media (max-width: 760px) {
  #wdi-ux-page .cb-card { flex-basis: 78vw; height: 420px; }
  #wdi-ux-page .cb-arrows { display: none; }
  #wdi-ux-page .cc-controls { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  #wdi-ux-page .cc-nav { justify-content: center; }
  #wdi-ux-page .cc-dots { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #wdi-ux-page .cc-track { transition: none; }
  #wdi-ux-page .cc-float { transform: none; }
  #wdi-ux-page .cc-progress-fill.run { animation: none; transform: scaleX(1); }
  #wdi-ux-page .cb-poster { transition: none; }
}

/* ============================================================
   VARIANT D — LIGHT MODE (diagnostic accordion)
   Matches the light homepage sections: white canvas, ink type,
   rose accent. Rows expand inline to reveal the full diagnosis.
   ============================================================ */
#wdi-ux-page .chal-light {
  position: relative;
  padding: 104px 0 116px;
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
#wdi-ux-page .chal-light .chal-head { max-width: 880px; }
#wdi-ux-page .chal-light .chal-eyebrow { color: var(--rose-600); }
#wdi-ux-page .chal-light .chal-eyebrow::before { box-shadow: 0 0 10px rgba(249,47,100,.5); }
#wdi-ux-page .chal-light .chal-h { color: var(--ink); }
#wdi-ux-page .chal-light .chal-intro { color: var(--ink-2); }
#wdi-ux-page .chal-light .chal-seo { color: var(--muted); }

/* light variant tag */
#wdi-ux-page .chal-vtag--light { color: var(--muted); }
#wdi-ux-page .chal-vtag--light b { color: var(--ink); }
#wdi-ux-page .chal-vtag--light .pill { color: #fff; background: var(--ink); }

/* interactive split: index list (left) drives a large detail panel (right) */
#wdi-ux-page .cd-split {
  margin-top: 52px;
  display: grid;
  grid-template-columns: 0.82fr 1.35fr;
  gap: 28px;
  align-items: start;
}

/* ---- left: numbered index ---- */
#wdi-ux-page .cd-nav { display: flex; flex-direction: column; justify-content: center; }
#wdi-ux-page .cd-item {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 22px 20px;
  background: none; border: none;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, padding-left .35s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .cd-item:last-child { border-bottom: none; }
#wdi-ux-page .cd-item-num {
  font-size: 13px; font-weight: 600; color: var(--faint);
  font-feature-settings: "tnum" 1; transition: color .35s ease;
}
#wdi-ux-page .cd-item-title {
  font-size: 18px; font-weight: 500; letter-spacing: -0.018em;
  color: var(--muted); line-height: 1.25; transition: color .35s ease;
}
#wdi-ux-page .cd-item-sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .cd-item-sub > span {
  overflow: hidden;
  font-size: 13.5px; font-weight: 300; line-height: 1.45; color: var(--muted);
}
#wdi-ux-page .cd-item:hover .cd-item-title { color: var(--ink-2); }
#wdi-ux-page .cd-item.active { background: var(--bg-2); }
#wdi-ux-page .cd-item.active .cd-item-num { color: var(--rose-600); }
#wdi-ux-page .cd-item.active .cd-item-title { color: var(--ink); }
#wdi-ux-page .cd-item.active .cd-item-sub { grid-template-rows: 1fr; margin-top: 8px; }
#wdi-ux-page .cd-item.active .cd-item-sub > span { color: var(--ink-2); }
/* active accent bar */
#wdi-ux-page .cd-item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%; border-radius: 3px;
  background: linear-gradient(180deg, var(--rose-600), var(--rose-400));
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .cd-item.active::before { transform: translateY(-50%) scaleY(1); }
#wdi-ux-page .cd-item.active.is-ai::before { background: linear-gradient(180deg, var(--rose-500), #7A00FF); }

/* ---- right: detail panel (calm editorial spec sheet) ---- */
#wdi-ux-page .cd-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg);
  padding: 46px 48px;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  flex-direction: column;
}

/* header: editorial numeral + icon chip + title */
#wdi-ux-page .cd-stage-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
#wdi-ux-page .cd-stage-meta { display: flex; align-items: center; gap: 13px; }
#wdi-ux-page .cd-stage-ico {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: var(--rose-soft); color: var(--rose-600);
}
#wdi-ux-page .cd-stage-ico svg { width: 23px; height: 23px; }
#wdi-ux-page .cd-stage-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-600); }
#wdi-ux-page .cd-stage-num {
  font-size: 58px; font-weight: 300; line-height: .85; letter-spacing: -0.045em;
  color: #E3E5E9; font-feature-settings: "tnum" 1;
}

#wdi-ux-page .cd-stage-title {
  margin-top: 28px; font-size: clamp(25px, 2.5vw, 33px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); max-width: 17ch; text-wrap: balance;
}
#wdi-ux-page .cd-stage-lead { margin-top: 16px; font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
#wdi-ux-page .cd-stage-desc { margin-top: 10px; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--muted); max-width: 58ch; }

/* editorial spec list — hairline rows, no colored boxes */
#wdi-ux-page .cd-spec { margin-top: 30px; border-top: 1px solid var(--line); }
#wdi-ux-page .cd-spec-row {
  display: grid; grid-template-columns: 152px 1fr; gap: 28px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
#wdi-ux-page .cd-spec-label {
  display: flex; align-items: center; gap: 9px; padding-top: 1px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint);
}
#wdi-ux-page .cd-spec-label .tick { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex: none; }
#wdi-ux-page .cd-spec-row.is-help .cd-spec-label { color: var(--rose-600); }
#wdi-ux-page .cd-spec-row.is-help .cd-spec-label .tick { background: var(--rose-500); box-shadow: 0 0 0 3px var(--rose-soft); }
#wdi-ux-page .cd-spec-text { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
#wdi-ux-page .cd-spec-row.is-help .cd-spec-text { color: var(--ink); font-weight: 400; }

/* footer: services + cta */
#wdi-ux-page .cd-stage-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
#wdi-ux-page .cd-stage-services { min-width: 0; }
#wdi-ux-page .cd-stage-services-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-bottom: 11px; }
#wdi-ux-page .cd-svc-list { display: flex; flex-wrap: wrap; gap: 9px; }
#wdi-ux-page .cd-svc { font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; text-decoration: none;
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease; }
#wdi-ux-page .cd-svc:hover { border-color: var(--rose-300); color: var(--ink); background: #fff; transform: translateY(-2px); }
#wdi-ux-page .cd-cta { position: relative; display: inline-flex; align-items: center; gap: 9px; flex: none;
  font-size: 14.5px; font-weight: 500; color: #fff; background: var(--ink); border-radius: 999px; padding: 14px 22px; text-decoration: none;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
#wdi-ux-page .cd-cta svg { width: 16px; height: 16px; transition: transform .25s ease; }
#wdi-ux-page .cd-cta:hover { background: var(--rose-600); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(228,18,82,.24); }
#wdi-ux-page .cd-cta:hover svg { transform: translateX(3px); }

/* content reveal on switch (transform-only so never invisible) */
#wdi-ux-page .cd-fx { transform: translateY(12px); }
#wdi-ux-page .cd-fx.show { transform: none; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .cd-stage-lead.show { transition-delay: .03s; }
#wdi-ux-page .cd-stage-desc.show { transition-delay: .07s; }
#wdi-ux-page .cd-spec.show { transition-delay: .11s; }
#wdi-ux-page .cd-stage-foot.show { transition-delay: .17s; }

@media (max-width: 940px) {
  #wdi-ux-page .cd-split { grid-template-columns: 1fr; gap: 18px; }
  #wdi-ux-page .cd-nav { flex-direction: row; flex-wrap: wrap; gap: 0; }
  #wdi-ux-page .cd-item { flex: 1 1 46%; border-bottom: 1px solid var(--line); }
  #wdi-ux-page .cd-item-sub { display: none; }
  #wdi-ux-page .cd-stage { order: -1; }
}
@media (max-width: 760px) {
  #wdi-ux-page .chal-light { padding: 70px 0 80px; }
  #wdi-ux-page .cd-stage { padding: 28px; min-height: 0; }
  #wdi-ux-page .cd-spec-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  #wdi-ux-page .cd-item { flex-basis: 100%; padding: 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #wdi-ux-page .cd-item-sub, #wdi-ux-page .cd-item::before { transition: none; }
  #wdi-ux-page .cd-fx { transform: none; }
}

/* ============================================================
   WDI — Solution Approach  (redesigned: Timeline + Radar Stage)
   ============================================================ */
#wdi-ux-page {
  --rose-700: #C40F46; --rose-600: #E41252; --rose-500: #F92F64;
  --rose-400: #FD3B6F; --rose-300: #FF6F92; --violet: #7A00FF;
  --ink:    #0B0C0E; --ink-2:  #41454C; --muted:  #717680; --faint:  #9AA0A8;
  --bg:     #FFFFFF; --bg-2:   #FBFBFC; --line:   #ECEDF0; --line-2: #E3E4E8;
  --rose-soft: rgba(249,47,100,.10);
  --font: "Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw: 1240px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* dev variant label */
#wdi-ux-page .sa-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .sa-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .sa-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

/* shared section shell */
#wdi-ux-page .sa-sec{position:relative;padding:104px 0 118px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .sa-sec.alt{background:var(--bg-2);}

/* shared header */
#wdi-ux-page .sa-head{max-width:840px;position:relative;z-index:2;}
#wdi-ux-page .sa-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .sa-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .sa-h{margin-top:20px;font-size:clamp(28px,3.4vw,44px);line-height:1.08;font-weight:500;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .sa-intro{margin-top:18px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;font-weight:300;color:var(--ink-2);text-wrap:pretty;max-width:70ch;}
#wdi-ux-page .sa-sub{margin-top:14px;font-size:15px;line-height:1.65;font-weight:400;color:var(--muted);max-width:70ch;text-wrap:pretty;}

/* shared pills */
#wdi-ux-page .sa-pills{display:flex;flex-wrap:wrap;gap:8px;}
#wdi-ux-page .sa-pill{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 13px;white-space:nowrap;transition:border-color .25s,background .25s,color .25s,transform .25s;}
#wdi-ux-page .sa-pill:hover{border-color:var(--rose-300);color:var(--ink);transform:translateY(-2px);}

/* shared buttons */
#wdi-ux-page .sa-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:500;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s ease,background .25s,box-shadow .25s;}
#wdi-ux-page .sa-btn svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .sa-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
#wdi-ux-page .sa-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .sa-btn-ghost{display:inline-flex;align-items:center;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;transition:border-color .25s,transform .25s;}
#wdi-ux-page .sa-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

/* shared section CTA */
#wdi-ux-page .sa-cta{margin-top:56px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:38px 42px;border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.07),transparent 58%),var(--bg);}
#wdi-ux-page .sa-sec.alt .sa-cta{background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.07),transparent 58%),var(--bg);}
#wdi-ux-page .sa-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet));}
#wdi-ux-page .sa-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .sa-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:58ch;}
#wdi-ux-page .sa-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

/* ============================================================
   VARIANT A — CONNECTED TIMELINE
   ============================================================ */
#wdi-ux-page .sat-body{margin-top:70px;position:relative;z-index:2;padding-left:6px;}

/* the drawn thread */
#wdi-ux-page .sat-track{position:absolute;left:21px;top:8px;bottom:8px;width:2px;background:var(--line);overflow:hidden;border-radius:2px;}
#wdi-ux-page .sat-track-fill{position:absolute;inset:0;background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 50%,var(--violet));transform:scaleY(0);transform-origin:top center;}
#wdi-ux-page #solution-a.in .sat-track-fill{animation:satDraw 2.4s cubic-bezier(.4,0,.1,1) forwards;}
@keyframes satDraw{to{transform:scaleY(1);}}

#wdi-ux-page .sat-step{
  position:relative;
  padding:0 0 56px 76px;
  /* reveal (transform-only) */
  transform:translateY(26px);
}
#wdi-ux-page #solution-a.in .sat-step{animation:satRise .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d);}
@keyframes satRise{to{transform:none;}}
#wdi-ux-page .sat-step:last-child{padding-bottom:6px;}

/* node */
#wdi-ux-page .sat-node{
  position:absolute;left:8px;top:2px;width:28px;height:28px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line-2);display:grid;place-items:center;
  z-index:2;transition:border-color .4s,box-shadow .4s,transform .4s;
}
#wdi-ux-page .sa-sec.alt .sat-node{background:var(--bg-2);}
#wdi-ux-page .sat-node::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background .4s,transform .4s;}
#wdi-ux-page #solution-a.in .sat-step .sat-node{border-color:var(--rose-400);box-shadow:0 0 0 5px rgba(249,47,100,.08);}
#wdi-ux-page #solution-a.in .sat-step .sat-node::after{background:linear-gradient(135deg,var(--rose-600),var(--rose-400));transform:scale(1.15);}

/* head row */
#wdi-ux-page .sat-kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .sat-kicker .n{color:var(--faint);font-feature-settings:"tnum" 1;}
#wdi-ux-page .sat-kicker .bar{flex:none;width:18px;height:1px;background:var(--rose-300);}
#wdi-ux-page .sat-title{position:relative;display:inline-block;margin-top:12px;font-size:clamp(21px,2.1vw,27px);font-weight:500;letter-spacing:-0.025em;line-height:1.14;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .sat-title::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:100%;background:linear-gradient(90deg,var(--rose-500),var(--rose-300));transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #solution-a.in .sat-step .sat-title::after{transform:scaleX(1);transition-delay:calc(var(--d) + .25s);}
#wdi-ux-page .sat-lead{margin-top:20px;font-size:16.5px;font-weight:400;line-height:1.5;color:var(--ink);max-width:60ch;}

/* clean detail: approach paragraph + 2-col problem/why with hairline tops */
#wdi-ux-page .sat-approach{margin-top:14px;font-size:14.5px;font-weight:300;line-height:1.62;color:var(--ink-2);max-width:66ch;}
#wdi-ux-page .sat-grid{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:760px;}
#wdi-ux-page .sat-col{padding-top:14px;border-top:1px solid var(--line);}
#wdi-ux-page .sat-col-label{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:9px;}
#wdi-ux-page .sat-col-label::before{content:"";width:6px;height:6px;border-radius:50%;}
#wdi-ux-page .sat-col.is-prob .sat-col-label{color:#C2691B;}#wdi-ux-page .sat-col.is-prob .sat-col-label::before{background:#E8821E;}
#wdi-ux-page .sat-col.is-why .sat-col-label{color:#5A1FD4;}#wdi-ux-page .sat-col.is-why .sat-col-label::before{background:var(--violet);}
#wdi-ux-page .sat-col p{font-size:13.5px;font-weight:300;line-height:1.58;color:var(--ink-2);}
#wdi-ux-page .sat-col.is-why p{color:var(--ink);font-weight:400;}

#wdi-ux-page .sat-foot{margin-top:24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
#wdi-ux-page .sat-services{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#wdi-ux-page .sat-services .lbl{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}
#wdi-ux-page .sat-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;transition:color .25s,gap .25s;}
#wdi-ux-page .sat-link svg{width:15px;height:15px;color:var(--rose-600);transition:transform .25s;}
#wdi-ux-page .sat-link:hover{color:var(--rose-600);gap:11px;}
#wdi-ux-page .sat-link:hover svg{transform:translateX(3px);}

/* ============================================================
   VARIANT B — RADAR FOCUS STAGE (auto-advancing)
   ============================================================ */
#wdi-ux-page .sar-wrap{margin-top:60px;position:relative;z-index:2;}
#wdi-ux-page .sar-stage{
  display:grid;grid-template-columns:1.12fr 1fr;gap:10px;align-items:stretch;
  border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--bg);
  box-shadow:0 24px 70px rgba(11,12,14,.07);
  /* reveal (transform-only) */
  transform:translateY(28px);
}
#wdi-ux-page #solution-b.in .sar-stage{animation:sarRise .9s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes sarRise{to{transform:none;}}

/* left: editorial */
#wdi-ux-page .sar-left{padding:48px 46px;display:flex;flex-direction:column;min-height:520px;}
#wdi-ux-page .sar-kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .sar-kicker .n{color:var(--faint);font-feature-settings:"tnum" 1;}
#wdi-ux-page .sar-kicker .bar{width:18px;height:1px;background:var(--rose-300);}
#wdi-ux-page .sar-title{margin-top:14px;font-size:clamp(24px,2.5vw,32px);font-weight:500;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .sar-lead{margin-top:16px;font-size:16px;font-weight:400;line-height:1.5;color:var(--ink);max-width:46ch;}
#wdi-ux-page .sar-rows{margin-top:24px;display:flex;flex-direction:column;}
#wdi-ux-page .sar-row{padding:16px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start;}
#wdi-ux-page .sar-row:last-child{border-bottom:1px solid var(--line);}
#wdi-ux-page .sar-row-label{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding-top:2px;}
#wdi-ux-page .sar-row-label::before{content:"";width:6px;height:6px;border-radius:50%;}
#wdi-ux-page .sar-row.is-prob .sar-row-label{color:#C2691B;}#wdi-ux-page .sar-row.is-prob .sar-row-label::before{background:#E8821E;}
#wdi-ux-page .sar-row.is-appr .sar-row-label{color:var(--rose-600);}#wdi-ux-page .sar-row.is-appr .sar-row-label::before{background:var(--rose-500);}
#wdi-ux-page .sar-row.is-why .sar-row-label{color:#5A1FD4;}#wdi-ux-page .sar-row.is-why .sar-row-label::before{background:var(--violet);}
#wdi-ux-page .sar-row p{font-size:13.5px;font-weight:300;line-height:1.55;color:var(--ink-2);}
#wdi-ux-page .sar-row.is-why p{color:var(--ink);font-weight:400;}
#wdi-ux-page .sar-foot{margin-top:auto;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}

/* blur-up reveal for swapped content (transform+blur only — never gates opacity) */
#wdi-ux-page .sar-fx{transform:translateY(12px);filter:blur(7px);}
#wdi-ux-page .sar-fx.show{transform:none;filter:blur(0);transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .55s ease;}
#wdi-ux-page .sar-lead.show{transition-delay:.05s;}
#wdi-ux-page .sar-rows.show{transition-delay:.10s;}
#wdi-ux-page .sar-foot.show{transition-delay:.16s;}

/* right: light radar visual */
#wdi-ux-page .sar-right{position:relative;background:linear-gradient(160deg,#fff,var(--bg-2));border-left:1px solid var(--line);overflow:hidden;display:grid;place-items:center;}
#wdi-ux-page .sar-right::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 60% 40%,var(--accent,rgba(249,47,100,.07)),transparent 62%);transition:background .7s ease;}
#wdi-ux-page .sar-radar{position:relative;width:78%;max-width:340px;aspect-ratio:1;}
#wdi-ux-page .sar-radar svg{width:100%;height:100%;overflow:visible;}
#wdi-ux-page .sar-ring{fill:none;stroke:var(--line-2);stroke-width:1;}
#wdi-ux-page .sar-ring.r2{stroke:var(--line);}
#wdi-ux-page .sar-ring.r3{stroke:var(--line-2);}
#wdi-ux-page .sar-cross{stroke:var(--line);stroke-width:1;}
/* thin rotating beam + soft trail */
#wdi-ux-page .sar-beam{transform-origin:200px 200px;animation:sarSweep 5s linear infinite;}
@keyframes sarSweep{to{transform:rotate(360deg);}}
/* orbiting satellite (counter-rotating, slower) */
#wdi-ux-page .sar-orbit{transform-origin:200px 200px;animation:sarOrbit 11s linear infinite;}
@keyframes sarOrbit{to{transform:rotate(360deg);}}
/* per-pillar constellation: connector lines draw in, nodes pop */
#wdi-ux-page .sar-link{stroke:var(--rose-400);stroke-width:1;opacity:.28;stroke-dasharray:200;stroke-dashoffset:200;animation:sarLink .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--ld,0s);}
@keyframes sarLink{to{stroke-dashoffset:0;}}
#wdi-ux-page .sar-node{transform-box:fill-box;animation:sarNodePop .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:var(--nd,.1s);}
@keyframes sarNodePop{0%{transform:scale(.4);}100%{transform:scale(1);}}
#wdi-ux-page .sar-node-dot{fill:var(--rose-500);}
#wdi-ux-page .sar-node-ring{fill:none;stroke:var(--rose-400);stroke-width:1.5;opacity:.5;animation:sarPing 2.4s ease-out infinite;transform-origin:center;}
@keyframes sarPing{0%{transform:scale(.6);opacity:.6;}70%{opacity:0;}100%{transform:scale(2.2);opacity:0;}}
#wdi-ux-page .sar-core{filter:drop-shadow(0 8px 22px rgba(228,18,82,.26));}
#wdi-ux-page .sar-core-halo{fill:none;stroke:rgba(249,47,100,.25);stroke-width:1;animation:sarHalo 3.4s ease-in-out infinite;transform-origin:200px 200px;}
@keyframes sarHalo{0%,100%{opacity:.4;transform:scale(.96);}50%{opacity:1;transform:scale(1.04);}}
#wdi-ux-page .sar-core-disc{fill:url(#sarCore);}
#wdi-ux-page .sar-ico{color:#fff;}
#wdi-ux-page .sar-ico svg{width:30px;height:30px;}
#wdi-ux-page .sar-badge{position:absolute;left:24px;top:22px;z-index:3;white-space:nowrap;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:6px 12px;}

/* controls: keyword tabs + progress */
#wdi-ux-page .sar-tabs{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap;}
#wdi-ux-page .sar-tab{position:relative;font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:-0.01em;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;overflow:hidden;transition:color .3s,border-color .3s,background .3s;}
#wdi-ux-page .sar-tab .fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--rose-soft);transform:scaleX(0);transform-origin:left center;z-index:0;}
#wdi-ux-page .sar-tab span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;}
#wdi-ux-page .sar-tab .tn{font-size:11px;color:var(--faint);font-feature-settings:"tnum" 1;transition:color .3s;}
#wdi-ux-page .sar-tab:hover{color:var(--ink);border-color:var(--line-2);}
#wdi-ux-page .sar-tab.active{color:var(--ink);border-color:var(--rose-300);}
#wdi-ux-page .sar-tab.active .tn{color:var(--rose-600);}
#wdi-ux-page .sar-tab.active.run .fill{animation:sarFill var(--dwell,6s) linear forwards;}
@keyframes sarFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* ============================================================
   VARIANT C — HORIZONTAL STEPPER DECK (Material-style)
   ============================================================ */
#wdi-ux-page .sas-wrap{margin-top:54px;position:relative;z-index:2;}

/* the stepper rail */
#wdi-ux-page .sas-rail{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--line);}
#wdi-ux-page .sas-step{
  position:relative;display:flex;align-items:center;gap:13px;
  padding:0 6px 22px;background:none;border:none;cursor:pointer;font-family:var(--font);text-align:left;
}
#wdi-ux-page .sas-dot{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line-2);color:var(--muted);
  font-size:13px;font-weight:600;font-feature-settings:"tnum" 1;
  transition:background .4s,color .4s,border-color .4s,transform .4s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page .sas-dot svg{width:19px;height:19px;}
#wdi-ux-page .sas-steptext{min-width:0;}
#wdi-ux-page .sas-stepkw{display:block;font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--muted);transition:color .35s;line-height:1.2;}
#wdi-ux-page .sas-stepsub{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--faint);transition:color .35s;}
#wdi-ux-page .sas-step:hover .sas-stepkw{color:var(--ink-2);}
#wdi-ux-page .sas-step:hover .sas-dot{border-color:var(--rose-300);}
#wdi-ux-page .sas-step.active .sas-dot{background:linear-gradient(135deg,var(--rose-600),var(--rose-400));color:#fff;border-color:transparent;transform:scale(1.06);box-shadow:0 8px 20px rgba(228,18,82,.22);}
#wdi-ux-page .sas-step.active .sas-stepkw{color:var(--ink);}
#wdi-ux-page .sas-step.active .sas-stepsub{color:var(--rose-600);}
/* sliding active indicator */
#wdi-ux-page .sas-ind{position:absolute;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--rose-600),var(--rose-400));border-radius:2px;transition:left .5s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1);}

/* the deck panel */
#wdi-ux-page .sas-deck{margin-top:38px;display:grid;grid-template-columns:1.15fr 1fr;gap:46px;align-items:start;}
#wdi-ux-page .sas-left{min-width:0;}
#wdi-ux-page .sas-eyrow{display:flex;align-items:center;gap:12px;}
#wdi-ux-page .sas-chip{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-600);background:var(--rose-soft);border-radius:999px;padding:6px 12px;}
#wdi-ux-page .sas-count{font-size:12.5px;font-weight:500;color:var(--faint);font-feature-settings:"tnum" 1;}
#wdi-ux-page .sas-title{margin-top:16px;font-size:clamp(26px,2.7vw,36px);font-weight:500;letter-spacing:-0.03em;line-height:1.07;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .sas-lead{margin-top:16px;font-size:16.5px;font-weight:400;line-height:1.5;color:var(--ink);max-width:48ch;}
#wdi-ux-page .sas-approach{margin-top:13px;font-size:14.5px;font-weight:300;line-height:1.62;color:var(--ink-2);max-width:54ch;}
#wdi-ux-page .sas-pills{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;}
#wdi-ux-page .sas-foot{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}

/* right: stacked problem / why cards with number watermark */
#wdi-ux-page .sas-right{position:relative;display:flex;flex-direction:column;gap:14px;padding-top:6px;}
#wdi-ux-page .sas-ghost{position:absolute;right:-6px;top:-46px;font-size:150px;font-weight:300;line-height:1;letter-spacing:-0.06em;color:rgba(11,12,14,.038);font-feature-settings:"tnum" 1;pointer-events:none;user-select:none;z-index:0;}
#wdi-ux-page .sas-card{position:relative;z-index:1;border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:var(--bg);overflow:hidden;}
#wdi-ux-page .sas-card.is-prob{border-left:3px solid #E8821E;}
#wdi-ux-page .sas-card.is-why{border-left:3px solid var(--violet);background:linear-gradient(140deg,rgba(249,47,100,.05),rgba(122,0,255,.04));}
#wdi-ux-page .sas-card-label{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px;}
#wdi-ux-page .sas-card-label::before{content:"";width:6px;height:6px;border-radius:50%;}
#wdi-ux-page .sas-card.is-prob .sas-card-label{color:#C2691B;}#wdi-ux-page .sas-card.is-prob .sas-card-label::before{background:#E8821E;}
#wdi-ux-page .sas-card.is-why .sas-card-label{color:#5A1FD4;}#wdi-ux-page .sas-card.is-why .sas-card-label::before{background:var(--violet);}
#wdi-ux-page .sas-card-text{font-size:13.8px;font-weight:300;line-height:1.58;color:var(--ink-2);}
#wdi-ux-page .sas-card.is-why .sas-card-text{color:var(--ink);font-weight:400;}

/* blur-up reveal for deck content */
#wdi-ux-page .sas-fx{transform:translateY(12px);filter:blur(7px);}
#wdi-ux-page .sas-fx.show{transform:none;filter:blur(0);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s ease;}
#wdi-ux-page .sas-lead.show{transition-delay:.04s;}
#wdi-ux-page .sas-approach.show{transition-delay:.08s;}
#wdi-ux-page .sas-pills.show{transition-delay:.12s;}
#wdi-ux-page .sas-foot.show{transition-delay:.16s;}
#wdi-ux-page .sas-card.is-prob.show{transition-delay:.06s;}
#wdi-ux-page .sas-card.is-why.show{transition-delay:.13s;}
/* deck entrance (transform-only — never resolves to invisible) */
#wdi-ux-page .sas-deck-wrap{transform:translateY(24px);}
#wdi-ux-page #solution-c.in .sas-deck-wrap{animation:sarRise .85s cubic-bezier(.2,.7,.2,1) forwards;}

/* ============================================================
   VARIANT D — ANTIGRAVITY MINIMAL (posh, airy, mouse-reactive)
   ============================================================ */
#wdi-ux-page .sad-sec{position:relative;overflow:hidden;}
#wdi-ux-page #dotfield{position:absolute;inset:0;z-index:0;pointer-events:none;}
#wdi-ux-page .sad-sec .wrap{position:relative;z-index:2;}

#wdi-ux-page .sad-wrap{margin-top:72px;min-height:460px;position:relative;}

/* slim numeric index */
#wdi-ux-page .sad-index{display:flex;align-items:center;gap:0;margin-bottom:60px;border-top:1px solid var(--line);}
#wdi-ux-page .sad-tick{
  position:relative;flex:1;display:flex;align-items:center;gap:9px;
  padding:18px 4px 0;background:none;border:none;cursor:pointer;font-family:var(--font);
  color:var(--faint);transition:color .4s;
}
#wdi-ux-page .sad-tick::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:transparent;transition:background .4s;}
#wdi-ux-page .sad-tick .tn{font-size:12px;font-weight:600;font-feature-settings:"tnum" 1;letter-spacing:.04em;}
#wdi-ux-page .sad-tick .tk{font-size:13px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap;}
#wdi-ux-page .sad-tick:hover{color:var(--ink-2);}
#wdi-ux-page .sad-tick.active{color:var(--ink);}
#wdi-ux-page .sad-tick.active::before{background:linear-gradient(90deg,var(--rose-600),var(--rose-400));}
#wdi-ux-page .sad-tick.active.run::before{animation:sadTick var(--dwell,6s) linear forwards;transform-origin:left center;}
@keyframes sadTick{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* the focus stage */
#wdi-ux-page .sad-stage{position:relative;max-width:1000px;}
#wdi-ux-page .sad-ghost{position:absolute;right:0;top:-78px;font-size:240px;font-weight:200;line-height:1;letter-spacing:-0.06em;color:rgba(11,12,14,.035);font-feature-settings:"tnum" 1;pointer-events:none;user-select:none;z-index:0;}
#wdi-ux-page .sad-eyrow{display:flex;align-items:center;gap:12px;}
#wdi-ux-page .sad-eyrow .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 0 5px rgba(249,47,100,.08);}
#wdi-ux-page .sad-kw{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .sad-title{margin-top:22px;font-size:clamp(32px,4.6vw,60px);font-weight:400;letter-spacing:-0.035em;line-height:1.02;color:var(--ink);max-width:18ch;text-wrap:balance;}
#wdi-ux-page .sad-lead{margin-top:26px;font-size:clamp(17px,1.6vw,21px);font-weight:300;line-height:1.5;color:var(--ink-2);max-width:62ch;}

/* hairline-only detail: approach + two minimal items, no boxes */
#wdi-ux-page .sad-detail{margin-top:40px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:44px;padding-top:30px;border-top:1px solid var(--line);max-width:980px;}
#wdi-ux-page .sad-col .lbl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:11px;}
#wdi-ux-page .sad-col.is-appr .lbl{color:var(--rose-600);}
#wdi-ux-page .sad-col.is-prob .lbl{color:#C2691B;}
#wdi-ux-page .sad-col.is-why .lbl{color:#5A1FD4;}
#wdi-ux-page .sad-col p{font-size:13.8px;font-weight:300;line-height:1.62;color:var(--ink-2);}
#wdi-ux-page .sad-col.is-appr p{color:var(--ink);font-weight:400;}

#wdi-ux-page .sad-foot{margin-top:38px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
#wdi-ux-page .sad-services{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
#wdi-ux-page .sad-services .lbl{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-right:2px;}

/* nav controls */
#wdi-ux-page .sad-nav{display:flex;align-items:center;gap:10px;margin-left:auto;}
#wdi-ux-page .sad-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:border-color .25s,color .25s,background .25s,transform .25s;}
#wdi-ux-page .sad-arrow svg{width:18px;height:18px;}
#wdi-ux-page .sad-arrow:hover{border-color:var(--rose-300);color:var(--rose-600);transform:translateY(-2px);}

/* blur-up reveal */
#wdi-ux-page .sad-fx{transform:translateY(14px);filter:blur(8px);}
#wdi-ux-page .sad-fx.show{transform:none;filter:blur(0);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .6s ease;}
#wdi-ux-page .sad-lead.show{transition-delay:.05s;}
#wdi-ux-page .sad-detail.show{transition-delay:.10s;}
#wdi-ux-page .sad-foot.show{transition-delay:.16s;}
#wdi-ux-page .sad-stagewrap{transform:translateY(24px);}
#wdi-ux-page #solution-d.in .sad-stagewrap{animation:sarRise .9s cubic-bezier(.2,.7,.2,1) forwards;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:920px){
  #wdi-ux-page .sar-stage{grid-template-columns:1fr;}
  #wdi-ux-page .sar-right{min-height:300px;border-left:none;border-top:1px solid var(--line);order:-1;}
  #wdi-ux-page .sar-left{min-height:0;}
  #wdi-ux-page .sas-deck{grid-template-columns:1fr;gap:26px;}
  #wdi-ux-page .sas-stepsub{display:none;}
  #wdi-ux-page .sas-step{gap:10px;}
  #wdi-ux-page .sad-detail{grid-template-columns:1fr;gap:22px;}
  #wdi-ux-page .sad-ghost{font-size:150px;top:-44px;}
  #wdi-ux-page .sad-tick .tk{display:none;}
}
@media(max-width:760px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .sa-sec{padding:70px 0 80px;}
  #wdi-ux-page .sa-vtag{padding:22px 22px 0;}
  #wdi-ux-page .sat-step{padding-left:56px;}
  #wdi-ux-page .sat-track{left:13px;}
  #wdi-ux-page .sat-node{left:0;}
  #wdi-ux-page .sat-grid{grid-template-columns:1fr;gap:18px;}
  #wdi-ux-page .sar-left{padding:30px 26px;}
  #wdi-ux-page .sar-row{grid-template-columns:1fr;gap:5px;}
  #wdi-ux-page .sas-rail{grid-auto-columns:minmax(190px,1fr);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  #wdi-ux-page .sas-rail::-webkit-scrollbar{display:none;}
  #wdi-ux-page .sas-deck{gap:22px;}
  #wdi-ux-page .sas-ghost{font-size:110px;top:-34px;}
  #wdi-ux-page .sad-index{flex-wrap:wrap;}
  #wdi-ux-page .sad-tick{flex:0 0 33.33%;padding:14px 4px;}
  #wdi-ux-page .sad-tick .tk{display:none;}
  #wdi-ux-page .sad-foot{gap:18px;}
  #wdi-ux-page .sad-nav{margin-left:0;}
  #wdi-ux-page .sa-cta{padding:26px;gap:20px;}
  #wdi-ux-page .sa-cta-actions{width:100%;}
  #wdi-ux-page .sa-cta .sa-btn,#wdi-ux-page .sa-btn-ghost{flex:1;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .sat-step{transform:none;animation:none;}
  #wdi-ux-page .sat-track-fill{transform:scaleY(1);animation:none;}
  #wdi-ux-page .sat-title::after{transform:scaleX(1);}
  #wdi-ux-page .sat-node{border-color:var(--rose-400)!important;}
  #wdi-ux-page .sat-node::after{background:var(--rose-500)!important;}
  #wdi-ux-page .sar-stage{transform:none;animation:none;}
  #wdi-ux-page .sar-beam,#wdi-ux-page .sar-orbit,#wdi-ux-page .sar-node-ring,#wdi-ux-page .sar-core-halo{animation:none;}
  #wdi-ux-page .sar-node{transform:none;animation:none;}
  #wdi-ux-page .sas-deck-wrap{opacity:1;transform:none;animation:none;}
  #wdi-ux-page .sas-fx{transform:none;filter:none;}
  #wdi-ux-page .sad-stagewrap{transform:none;animation:none;}
  #wdi-ux-page .sad-fx{transform:none;filter:none;}
  #wdi-ux-page .sad-tick.active.run::before{animation:none;transform:scaleX(1);}
  #wdi-ux-page .sas-ind{transition:none;}
  #wdi-ux-page .sar-link{stroke-dashoffset:0;animation:none;}
  #wdi-ux-page .sar-fx{transform:none;filter:none;}
  #wdi-ux-page .sar-tab.active.run .fill{animation:none;}
}

/* WDI — Technologies & Integrations · 3 variants */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--rose-200:#FFB3C7;
  --violet:#7A00FF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1320px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

#wdi-ux-page .te-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .te-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .te-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

#wdi-ux-page .te-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .te-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .te-h{margin-top:22px;font-size:clamp(34px,4vw,52px);line-height:1.04;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .te-sub{margin-top:20px;font-size:clamp(15px,1.25vw,17.5px);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:54ch;}

#wdi-ux-page .te-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:500;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,box-shadow .3s;}
#wdi-ux-page .te-btn svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .te-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(228,18,82,.28);}
#wdi-ux-page .te-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .te-btn-ghost{display:inline-flex;align-items:center;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:14px 22px;text-decoration:none;transition:border-color .25s,transform .25s;}
#wdi-ux-page .te-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

#wdi-ux-page .te-cta{margin-top:60px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:38px 42px;border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.07),transparent 58%),var(--bg);}
#wdi-ux-page .te-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet));}
#wdi-ux-page .te-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .te-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
#wdi-ux-page .te-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

/* ============================================================
   VARIANT A — Compact · CTA left, 3 marquee rows right
   ============================================================ */
#wdi-ux-page .tea-sec{padding:90px 0 110px;background:var(--bg);border-top:1px solid var(--line);}
#wdi-ux-page .tea-grid{display:grid;grid-template-columns:0.6fr 1fr;gap:60px;align-items:center;}
#wdi-ux-page .tea-left .te-h{font-size:clamp(28px,2.8vw,38px);}
#wdi-ux-page .tea-left .te-sub{margin-top:16px;max-width:38ch;font-size:15px;}
#wdi-ux-page .tea-left .te-btn{margin-top:24px;}
#wdi-ux-page .tea-rows{display:flex;flex-direction:column;gap:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
#wdi-ux-page .tea-row{overflow:hidden;}
#wdi-ux-page .tea-track{display:inline-flex;gap:14px;animation:marqR 36s linear infinite;will-change:transform;}
#wdi-ux-page .tea-row:hover .tea-track{animation-play-state:paused;}
#wdi-ux-page .tea-track.left{animation:marqL 32s linear infinite;}
@keyframes marqR{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marqL{from{transform:translateX(-50%);}to{transform:translateX(0);}}
#wdi-ux-page .tea-pill{display:inline-flex;align-items:center;gap:10px;flex:none;padding:10px 18px 10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:14px;font-weight:500;color:var(--ink-2);transition:border-color .3s,transform .3s,box-shadow .3s;}
#wdi-ux-page .tea-pill:hover{border-color:var(--rose-300);transform:translateY(-2px);box-shadow:0 8px 22px rgba(249,47,100,.10);color:var(--ink);}
#wdi-ux-page .tea-pill img{width:22px;height:22px;object-fit:contain;}

/* ============================================================
   VARIANT B — Detailed Linear-style with category tabs + grid
   ============================================================ */
#wdi-ux-page .teb-sec{padding:100px 0 130px;background:#0A0B0E;color:#fff;border-top:1px solid var(--line);position:relative;overflow:hidden;}
#wdi-ux-page .teb-sec::before{content:"";position:absolute;left:-15%;top:-10%;width:50vw;height:50vh;border-radius:50%;background:radial-gradient(circle,rgba(249,47,100,.18),transparent 70%);filter:blur(80px);pointer-events:none;}
#wdi-ux-page .teb-head{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto 50px;}
#wdi-ux-page .teb-head .te-eyebrow{color:var(--rose-300);}
#wdi-ux-page .teb-head .te-h{color:#fff;}
#wdi-ux-page .teb-head .te-sub{color:rgba(255,255,255,.7);margin-left:auto;margin-right:auto;}

#wdi-ux-page .teb-tabs-wrap{position:relative;z-index:2;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:48px;}
#wdi-ux-page .teb-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 2px;}
#wdi-ux-page .teb-tabs::-webkit-scrollbar{display:none;}
#wdi-ux-page .teb-tab{display:flex;align-items:center;gap:10px;font-family:var(--font);font-size:14.5px;font-weight:500;color:rgba(255,255,255,.55);background:none;border:none;cursor:pointer;padding:18px 18px;white-space:nowrap;border-bottom:2px solid transparent;transition:color .3s,border-color .3s;}
#wdi-ux-page .teb-tab:hover{color:rgba(255,255,255,.85);}
#wdi-ux-page .teb-tab.active{color:#fff;border-bottom-color:var(--rose-400);}
#wdi-ux-page .teb-tab svg{width:18px;height:18px;}
#wdi-ux-page .teb-tab .ico{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.06);}
#wdi-ux-page .teb-tab.active .ico{background:linear-gradient(135deg,var(--rose-600),var(--rose-400));color:#fff;}

#wdi-ux-page .teb-cathead{position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px;}
#wdi-ux-page .teb-cattitle{font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-0.03em;color:#fff;}
#wdi-ux-page .teb-catsub{margin-top:10px;font-size:15.5px;font-weight:400;line-height:1.5;color:rgba(255,255,255,.7);max-width:60ch;}
#wdi-ux-page .teb-aeo{font-size:13.5px;font-style:italic;color:rgba(255,255,255,.55);padding-left:14px;border-left:2px solid var(--rose-400);max-width:36ch;}

#wdi-ux-page .teb-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
#wdi-ux-page .teb-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px 26px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));cursor:default;transition:border-color .35s,background .35s,transform .35s;}
#wdi-ux-page .teb-card:hover{border-color:rgba(253,59,111,.45);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(249,47,100,.04));transform:translateY(-3px);}
#wdi-ux-page .teb-card .row{display:flex;align-items:center;gap:14px;}
#wdi-ux-page .teb-card .logo{position:relative;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.96);display:grid;place-items:center;flex:none;overflow:hidden;}
#wdi-ux-page .teb-card .logo img{width:28px;height:28px;object-fit:contain;}
#wdi-ux-page .teb-card .logo::after{content:"";position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--rose-500),var(--rose-300));border:2px solid #0A0B0E;display:none;}
#wdi-ux-page .teb-card.featured .logo::after{display:block;}
#wdi-ux-page .teb-card h4{font-size:17px;font-weight:500;letter-spacing:-0.015em;color:#fff;}
#wdi-ux-page .teb-card p{font-size:13.5px;font-weight:400;line-height:1.5;color:rgba(255,255,255,.62);}
/* scroll reveal */
#wdi-ux-page .teb-card{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),border-color .35s,background .35s;}
#wdi-ux-page .teb-sec.in .teb-card{opacity:1;transform:none;}
#wdi-ux-page .teb-sec.in .teb-card{transition-delay:var(--d,0s);}

/* ============================================================
   VARIANT C — Creative · constellation + ambient AI glow
   ============================================================ */
#wdi-ux-page .tec-sec{position:relative;padding:120px 0 140px;background:var(--bg-2);border-top:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .tec-sec::before{content:"";position:absolute;left:50%;top:48%;width:80vmin;height:80vmin;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(249,47,100,.16),rgba(122,0,255,.10) 45%,transparent 75%);
  filter:blur(40px);pointer-events:none;}
#wdi-ux-page .tec-sec::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,12,14,.16) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 70%);
          mask-image:radial-gradient(ellipse at center,#000,transparent 70%);
  opacity:.4;}
#wdi-ux-page .tec-head{text-align:center;max-width:740px;margin:0 auto 60px;position:relative;z-index:3;}
#wdi-ux-page .tec-stage{position:relative;height:600px;margin:0 auto;max-width:760px;z-index:2;}
#wdi-ux-page .tec-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--ink),#1a1c20);color:#fff;font-size:24px;font-weight:600;letter-spacing:-0.02em;box-shadow:0 0 0 1px var(--line-2),0 30px 80px rgba(249,47,100,.30),inset 0 0 30px rgba(249,47,100,.15);z-index:5;}
#wdi-ux-page .tec-core span{background:linear-gradient(120deg,var(--rose-500),var(--rose-300),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .tec-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(11,12,14,.10);transform:translate(-50%,-50%);}
#wdi-ux-page .tec-r1{width:280px;height:280px;animation:tecSpin 36s linear infinite;}
#wdi-ux-page .tec-r2{width:480px;height:480px;animation:tecSpin 60s linear infinite reverse;}
#wdi-ux-page .tec-r3{width:680px;height:680px;animation:tecSpin 90s linear infinite;}
@keyframes tecSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
#wdi-ux-page .tec-dot{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;display:grid;place-items:center;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(11,12,14,.10);transition:transform .35s,box-shadow .35s,border-color .35s;cursor:pointer;animation:tecCounter 36s linear infinite;}
#wdi-ux-page .tec-r2 .tec-dot{animation:tecCounter2 60s linear infinite;}
#wdi-ux-page .tec-r3 .tec-dot{animation:tecCounter3 90s linear infinite;}
#wdi-ux-page .tec-dot:hover{transform:scale(1.15);border-color:var(--rose-300);box-shadow:0 18px 40px rgba(249,47,100,.20);}
#wdi-ux-page .tec-dot img{width:28px;height:28px;object-fit:contain;}
@keyframes tecCounter{to{transform:rotate(-360deg);}}
@keyframes tecCounter2{to{transform:rotate(360deg);}}
@keyframes tecCounter3{to{transform:rotate(-360deg);}}

@media(max-width:960px){
  #wdi-ux-page .tea-grid{grid-template-columns:1fr;}
  #wdi-ux-page .teb-grid{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .tec-stage{height:480px;}
  #wdi-ux-page .tec-r1{width:220px;height:220px;}
  #wdi-ux-page .tec-r2{width:360px;height:360px;}
  #wdi-ux-page .tec-r3{width:520px;height:520px;}
}
@media(max-width:700px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .teb-grid{grid-template-columns:1fr;}
  #wdi-ux-page .te-cta{padding:26px;gap:20px;}
  #wdi-ux-page .te-cta-actions{width:100%;}
  #wdi-ux-page .te-cta .te-btn,#wdi-ux-page .te-btn-ghost{flex:1;justify-content:center;}
  #wdi-ux-page .tec-stage{height:380px;}
  #wdi-ux-page .tec-r2{width:300px;height:300px;}
  #wdi-ux-page .tec-r3{width:380px;height:380px;}
  #wdi-ux-page .tec-dot{width:40px;height:40px;margin:-20px 0 0 -20px;}
  #wdi-ux-page .tec-dot img{width:22px;height:22px;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .tea-track,#wdi-ux-page .tec-r1,#wdi-ux-page .tec-r2,#wdi-ux-page .tec-r3,#wdi-ux-page .tec-dot{animation:none!important;}
}

/* ============================================================
   WDI — Industries section · variants
   A (light + dark) · C image blocks · D Apple · F technical index
   Cohesive with the homepage / "How We Create" process system:
   rose accent, ink type, near-white grounds, dark image frames.
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--rose-200:#FFB3C7;--rose-100:#FFE0E9;
  --violet:#7A00FF;--violet-2:#A24BFF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
#wdi-ux-page *{ box-sizing:border-box; }
#wdi-ux-page{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
#wdi-ux-page{ margin:0; font-family:var(--font); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
#wdi-ux-page a{ color:inherit; text-decoration:none; }
#wdi-ux-page img{ display:block; max-width:100%; }

/* ---- scroll reveal utility ---- */
#wdi-ux-page .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .reveal.in{ opacity:1; transform:none; }
#wdi-ux-page .reveal[data-d="1"]{ transition-delay:.07s; }
#wdi-ux-page .reveal[data-d="2"]{ transition-delay:.14s; }
#wdi-ux-page .reveal[data-d="3"]{ transition-delay:.21s; }
#wdi-ux-page .reveal[data-d="4"]{ transition-delay:.28s; }

/* ---- variant label strip ---- */
#wdi-ux-page .ivv-vtag{ font-family:var(--font); font-size:13.5px; line-height:1.5; color:var(--ink-2); background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px clamp(20px,5vw,64px); }
#wdi-ux-page .ivv-vtag b{ color:var(--ink); font-weight:600; }
#wdi-ux-page .ivv-vtag .pill{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--ink); padding:3px 10px; border-radius:999px; margin-right:10px; vertical-align:middle; }

/* ---- shared scaffolding ---- */
#wdi-ux-page .ivv-sec{ position:relative; padding:clamp(64px,8vw,108px) 0; border-top:1px solid var(--line); }
#wdi-ux-page .ivv-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); position:relative; z-index:2; }

#wdi-ux-page .ivv-head{ max-width:900px; }
#wdi-ux-page .ivv-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-600); }
#wdi-ux-page .ivv-eyebrow::before{ content:""; width:7px; height:7px; border-radius:2px; background:linear-gradient(135deg,var(--rose-600),var(--rose-400)); box-shadow:0 0 10px rgba(249,47,100,.5); }
#wdi-ux-page .ivv-h{ margin:18px 0 0; font-size:clamp(28px,3.5vw,46px); line-height:1.06; font-weight:500; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
#wdi-ux-page .ivv-answer,#wdi-ux-page .ivv-support{ margin:18px 0 0; font-size:clamp(15.5px,1.3vw,18px); line-height:1.6; font-weight:300; color:var(--ink-2); max-width:76ch; text-wrap:pretty; }

/* shared buttons */
#wdi-ux-page .ivv-btn-dark,#wdi-ux-page .ivv-btn-ghost{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font); font-size:15px; font-weight:500; letter-spacing:-.01em; border-radius:999px; padding:14px 22px; text-decoration:none; white-space:nowrap; transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, box-shadow .25s, border-color .25s, color .25s; }
#wdi-ux-page .ivv-btn-dark{ color:#fff; background:var(--ink); box-shadow:0 1px 2px rgba(11,12,14,.18),0 8px 24px rgba(11,12,14,.10); }
#wdi-ux-page .ivv-btn-dark svg{ width:17px; height:17px; transition:transform .25s; }
#wdi-ux-page .ivv-btn-dark:hover{ background:var(--rose-600); transform:translateY(-2px); box-shadow:0 2px 6px rgba(228,18,82,.30),0 14px 34px rgba(228,18,82,.26); }
#wdi-ux-page .ivv-btn-dark:hover svg{ transform:translateX(3px); }
#wdi-ux-page .ivv-btn-ghost{ color:var(--ink); background:transparent; border:1px solid var(--line-2); }
#wdi-ux-page .ivv-btn-ghost:hover{ border-color:var(--rose-300); transform:translateY(-2px); }

#wdi-ux-page .tickdot{ width:19px; height:19px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--rose-soft); color:var(--rose-600); }
#wdi-ux-page .tickdot svg{ width:11px; height:11px; }

/* ============================================================
   VARIANT A — SCROLL-REVEAL EDITORIAL INDEX
   ============================================================ */
#wdi-ux-page .iv1-list{ margin-top:clamp(34px,5vw,58px); }
#wdi-ux-page .iv1-row{ position:relative; border-top:1px solid var(--line); padding:clamp(22px,3vw,38px) 0; cursor:pointer; overflow:hidden; }
#wdi-ux-page .iv1-list .iv1-row:last-child{ border-bottom:1px solid var(--line); }
#wdi-ux-page .iv1-row-head{ display:flex; align-items:baseline; gap:clamp(16px,3vw,34px); }
/* big faint index numeral — fades in on the active row */
#wdi-ux-page .iv1-ghost{ position:absolute; z-index:-1; right:-.04em; top:50%; transform:translateY(-46%) scale(.94); font-size:clamp(110px,19vw,232px); font-weight:700; line-height:1; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.5px var(--rose-200); font-feature-settings:"tnum" 1; pointer-events:none; opacity:0; transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .iv1-row.active .iv1-ghost{ opacity:.55; transform:translateY(-50%) scale(1); }
#wdi-ux-page .iv1-row-head{ display:flex; align-items:baseline; gap:clamp(16px,3vw,34px); }
#wdi-ux-page .iv1-idx{ flex:none; width:42px; font-size:14px; font-weight:600; color:var(--faint); font-feature-settings:"tnum" 1; transition:color .4s; }
#wdi-ux-page .iv1-name{ position:relative; font-size:clamp(28px,5vw,64px); font-weight:600; letter-spacing:-.035em; line-height:1; color:#D5D7DD; transition:color .45s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .iv1-name::after{ content:""; position:absolute; left:0; right:0; bottom:-.12em; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--rose-600),var(--rose-400) 60%,var(--violet)); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .iv1-short{ flex:1; min-width:0; align-self:center; font-size:14.5px; line-height:1.5; font-weight:300; color:transparent; max-width:40ch; margin-left:auto; text-align:right; opacity:0; transform:translateX(10px); transition:opacity .5s, transform .5s, color .5s; }
#wdi-ux-page .iv1-row.active .iv1-idx{ color:var(--rose-600); }
#wdi-ux-page .iv1-row.active .iv1-name{ color:var(--ink); }
#wdi-ux-page .iv1-row .iv1-name{ transition:color .45s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); transform-origin:left center; }
#wdi-ux-page .iv1-row.active .iv1-name{ transform:translateX(2px); }
#wdi-ux-page .iv1-row.active .iv1-name::after{ transform:scaleX(1); }
#wdi-ux-page .iv1-row.active .iv1-short{ opacity:1; transform:none; color:var(--muted); }
#wdi-ux-page .iv1-row:hover .iv1-name{ color:var(--ink-2); }
#wdi-ux-page .iv1-row.active:hover .iv1-name{ color:var(--ink); }

#wdi-ux-page .iv1-detail{ overflow:hidden; max-height:0; opacity:0; transition:max-height .6s cubic-bezier(.2,.7,.2,1), opacity .5s; }
#wdi-ux-page .iv1-row.active .iv1-detail{ max-height:460px; opacity:1; }
#wdi-ux-page .iv1-detail-in{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(28px,5vw,64px); padding:clamp(22px,2.6vw,32px) 0 6px 60px; }
#wdi-ux-page .iv1-long{ margin:0; font-size:16px; line-height:1.62; font-weight:300; color:var(--ink-2); max-width:56ch; }
#wdi-ux-page .iv1-aeo{ margin:18px 0 0; padding-left:16px; border-left:3px solid var(--rose-500); font-size:13px; font-style:italic; line-height:1.55; font-weight:300; color:var(--muted); max-width:60ch; }
#wdi-ux-page .iv1-cta{ margin-top:22px; }
#wdi-ux-page .iv1-side-label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-600); margin-bottom:12px; }
#wdi-ux-page .iv1-subs{ display:flex; flex-direction:column; gap:0; }
#wdi-ux-page .iv1-subs span{ display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:400; color:var(--ink-2); padding:11px 0; border-top:1px solid var(--line); }
#wdi-ux-page .iv1-subs span:first-child{ border-top:none; }

/* ---- VARIANT A · DARK ---- */
#wdi-ux-page .iv1--dark{ background:#08090C; border-top:1px solid #16181d; color:#fff; overflow:hidden; }
#wdi-ux-page .iv1--dark .ivv-h{ color:#fff; }
#wdi-ux-page .iv1--dark .ivv-answer{ color:rgba(255,255,255,.66); }
#wdi-ux-page .iv1--dark .iv1-row{ border-top-color:rgba(255,255,255,.10); }
#wdi-ux-page .iv1--dark .iv1-list .iv1-row:last-child{ border-bottom-color:rgba(255,255,255,.10); }
#wdi-ux-page .iv1--dark .iv1-idx{ color:rgba(255,255,255,.34); }
#wdi-ux-page .iv1--dark .iv1-name{ color:rgba(255,255,255,.30); }
#wdi-ux-page .iv1--dark .iv1-row.active .iv1-name{ color:#fff; }
#wdi-ux-page .iv1--dark .iv1-row.active .iv1-idx{ color:var(--rose-400); }
#wdi-ux-page .iv1--dark .iv1-row:hover .iv1-name{ color:rgba(255,255,255,.62); }
#wdi-ux-page .iv1--dark .iv1-row.active:hover .iv1-name{ color:#fff; }
#wdi-ux-page .iv1--dark .iv1-row.active .iv1-short{ color:rgba(255,255,255,.5); }
#wdi-ux-page .iv1--dark .iv1-long{ color:rgba(255,255,255,.78); }
#wdi-ux-page .iv1--dark .iv1-ghost{ -webkit-text-stroke-color:rgba(249,47,100,.32); }
#wdi-ux-page .iv1--dark .iv1-row.active .iv1-ghost{ opacity:.42; }
#wdi-ux-page .iv1--dark .iv1-aeo{ color:rgba(255,255,255,.5); border-left-color:var(--rose-400); }
#wdi-ux-page .iv1--dark .iv1-subs span{ color:rgba(255,255,255,.82); border-top-color:rgba(255,255,255,.10); }
#wdi-ux-page .iv1--dark .tickdot{ background:rgba(249,47,100,.16); color:var(--rose-300); }
#wdi-ux-page .iv1--dark .ivv-btn-dark{ background:#fff; color:var(--ink); }
#wdi-ux-page .iv1--dark .ivv-btn-dark:hover{ background:var(--rose-500); color:#fff; }
#wdi-ux-page .iv1--dark .iv1-row.active{ position:relative; }
#wdi-ux-page .iv1--dark .iv1-row.active::before{ content:""; position:absolute; left:-24px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--rose-500),var(--violet)); border-radius:2px; box-shadow:0 0 16px rgba(249,47,100,.6); }

/* kinetic marquee */
#wdi-ux-page .iv1d-marquee{ position:relative; z-index:1; overflow:hidden; padding:6px 0 clamp(30px,5vw,52px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
#wdi-ux-page .iv1d-track{ display:inline-flex; align-items:center; gap:34px; white-space:nowrap; will-change:transform; animation:iv1dScroll 42s linear infinite; }
#wdi-ux-page .iv1d-track span{ font-size:clamp(34px,5vw,66px); font-weight:600; letter-spacing:-.035em; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.16); }
#wdi-ux-page .iv1d-track b{ color:rgba(249,47,100,.55); font-weight:600; -webkit-text-stroke:0; }
@keyframes iv1dScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
#wdi-ux-page .iv1--dark:hover .iv1d-track{ animation-play-state:paused; }

/* ============================================================
   VARIANT C — IMAGE-BACKGROUND HOVER BLOCKS
   ============================================================ */
#wdi-ux-page .iv3-grid{ margin-top:clamp(34px,5vw,56px); display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
#wdi-ux-page .iv3-block{ position:relative; overflow:hidden; border-radius:22px; min-height:360px; background:#08090C; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; isolation:isolate; }
#wdi-ux-page .iv3-block:nth-child(1){ grid-column:span 2; }
#wdi-ux-page .iv3-block:nth-child(7){ grid-column:span 2; }
#wdi-ux-page .iv3-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.02); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .iv3-block:hover .iv3-photo{ transform:scale(1.08); }
#wdi-ux-page .iv3-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,9,12,.04) 0%, rgba(8,9,12,.32) 46%, rgba(8,9,12,.90) 100%); transition:background .5s; }
#wdi-ux-page .iv3-block:hover .iv3-scrim{ background:linear-gradient(180deg, rgba(8,9,12,.34) 0%, rgba(8,9,12,.66) 44%, rgba(8,9,12,.97) 100%); }
#wdi-ux-page .iv3-block::before{ content:""; position:absolute; inset:0; z-index:3; border-radius:22px; border:1px solid rgba(255,255,255,.08); pointer-events:none; transition:border-color .4s; }
#wdi-ux-page .iv3-block:hover::before{ border-color:rgba(249,47,100,.45); }
#wdi-ux-page .iv3-body{ position:relative; z-index:2; padding:clamp(22px,2.4vw,30px); color:#fff; }
#wdi-ux-page .iv3-top{ position:absolute; top:clamp(20px,2.2vw,26px); left:clamp(22px,2.4vw,30px); right:clamp(22px,2.4vw,30px); z-index:2; display:flex; align-items:center; justify-content:space-between; }
#wdi-ux-page .iv3-ico{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(8px); }
#wdi-ux-page .iv3-ico svg{ width:21px; height:21px; }
#wdi-ux-page .iv3-num{ font-size:12px; font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.62); font-feature-settings:"tnum" 1; }
#wdi-ux-page .iv3-tagn{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-300); }
#wdi-ux-page .iv3-name{ margin-top:8px; font-size:clamp(22px,2.1vw,29px); font-weight:600; letter-spacing:-.025em; line-height:1.05; }
#wdi-ux-page .iv3-reveal{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1), opacity .45s; }
#wdi-ux-page .iv3-block:hover .iv3-reveal,#wdi-ux-page .iv3-block.open .iv3-reveal{ grid-template-rows:1fr; opacity:1; }
#wdi-ux-page .iv3-reveal-in{ overflow:hidden; }
#wdi-ux-page .iv3-short{ margin:14px 0 0; font-size:13.5px; line-height:1.55; font-weight:300; color:rgba(255,255,255,.84); max-width:48ch; }
#wdi-ux-page .iv3-subs{ margin:15px 0 0; display:flex; flex-wrap:wrap; gap:7px; }
#wdi-ux-page .iv3-subs i{ font-style:normal; font-size:11.5px; font-weight:500; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:5px 11px; backdrop-filter:blur(6px); }
#wdi-ux-page .iv3-cta{ margin-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#fff; }
#wdi-ux-page .iv3-cta svg{ width:15px; height:15px; transition:transform .3s; }
#wdi-ux-page .iv3-block:hover .iv3-cta svg{ transform:translateX(3px); }

/* ============================================================
   VARIANT D — APPLE-CENTRIC (type-forward, no media)
   ============================================================ */
#wdi-ux-page .iv4-head{ text-align:center; max-width:none; }
#wdi-ux-page .iv4-head .ivv-eyebrow{ justify-content:center; }
#wdi-ux-page .iv4-head .ivv-h{ margin-left:auto; margin-right:auto; max-width:18ch; }
#wdi-ux-page .iv4-seg{ position:relative; margin:clamp(30px,4vw,46px) auto 0; display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:2px; padding:5px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
#wdi-ux-page .iv4-seg::-webkit-scrollbar{ display:none; }
#wdi-ux-page .iv4-seg-ind{ position:absolute; top:5px; bottom:5px; left:0; z-index:0; width:0; border-radius:999px; background:var(--bg); box-shadow:0 2px 8px rgba(11,12,14,.10); transition:transform .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .iv4-seg-btn{ position:relative; z-index:1; flex:none; font-family:var(--font); font-size:13.5px; font-weight:500; letter-spacing:-.01em; color:var(--muted); background:none; border:none; border-radius:999px; padding:9px 18px; cursor:pointer; white-space:nowrap; transition:color .3s; }
#wdi-ux-page .iv4-seg-btn:hover{ color:var(--ink); }
#wdi-ux-page .iv4-seg-btn.active{ color:var(--ink); }
#wdi-ux-page .iv4-stage{ position:relative; z-index:1; margin-top:clamp(40px,6vw,64px); min-height:clamp(388px,44vh,468px); display:grid; place-items:center; }
#wdi-ux-page .iv4-slide{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; opacity:0; transform:translateY(18px) scale(.99); pointer-events:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .iv4-slide.active{ opacity:1; transform:none; }
#wdi-ux-page .iv4-halo{ position:absolute; top:42%; left:50%; width:min(58vw,560px); height:min(58vw,560px); transform:translate(-50%,-50%); border-radius:50%; z-index:0; opacity:0; filter:blur(64px); transition:opacity .8s ease; background:radial-gradient(circle, color-mix(in srgb, var(--hue) 18%, transparent), transparent 64%); }
#wdi-ux-page .iv4-slide.active .iv4-halo{ opacity:.5; }
/* animated vector rings */
#wdi-ux-page .iv4-rings{ position:absolute; top:42%; left:50%; width:min(92vw,760px); height:min(92vw,760px); transform:translate(-50%,-50%); z-index:0; opacity:0; transition:opacity 1s ease; }
#wdi-ux-page .iv4-rings svg{ width:100%; height:100%; overflow:visible; }
#wdi-ux-page .iv4-rings .r{ fill:none; stroke:var(--hue); transform-origin:300px 300px; }
#wdi-ux-page .iv4-rings .r1{ stroke-width:1.1; opacity:.5; stroke-dasharray:2 11; animation:iv4spin 30s linear infinite; }
#wdi-ux-page .iv4-rings .r2{ stroke-width:1; opacity:.34; stroke-dasharray:54 30; animation:iv4spin 46s linear infinite reverse; }
#wdi-ux-page .iv4-rings .r3{ stroke-width:1; opacity:.2; stroke-dasharray:1 16; animation:iv4spin 70s linear infinite; }
#wdi-ux-page .iv4-rings .orbit{ transform-origin:300px 300px; }
#wdi-ux-page .iv4-rings .o1{ animation:iv4spin 14s linear infinite; }
#wdi-ux-page .iv4-rings .o2{ animation:iv4spin 22s linear infinite reverse; }
#wdi-ux-page .iv4-rings .dot{ fill:var(--hue); filter:drop-shadow(0 0 7px color-mix(in srgb, var(--hue) 70%, transparent)); }
#wdi-ux-page .iv4-rings .dot-sm{ opacity:.7; }
#wdi-ux-page .iv4-slide.active .iv4-rings{ opacity:1; }
@keyframes iv4spin{ to{ transform:rotate(360deg); } }
#wdi-ux-page .iv4-tag{ position:relative; z-index:2; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--rose-600); }
#wdi-ux-page .iv4-name{ position:relative; z-index:2; margin:18px 0 0; font-size:clamp(38px,6vw,84px); font-weight:600; letter-spacing:-.045em; line-height:.98; color:var(--ink); text-wrap:balance; max-width:16ch; }
#wdi-ux-page .iv4-desc{ position:relative; z-index:2; margin:24px 0 0; font-size:clamp(16px,1.5vw,20px); line-height:1.55; font-weight:300; color:var(--ink-2); max-width:60ch; text-wrap:pretty; }
#wdi-ux-page .iv4-subline{ position:relative; z-index:2; margin:28px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; max-width:60ch; }
#wdi-ux-page .iv4-subline span{ font-size:13px; font-weight:500; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:8px 15px; pointer-events:auto; transition:border-color .3s, color .3s, transform .3s; }
#wdi-ux-page .iv4-subline span:hover{ border-color:var(--rose-300); color:var(--ink); transform:translateY(-2px); }
#wdi-ux-page .iv4-cta{ position:relative; z-index:2; margin-top:34px; pointer-events:auto; }
#wdi-ux-page .iv4-nav{ position:relative; z-index:4; display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(30px,4vw,46px); }
#wdi-ux-page .iv4-arrow{ width:48px; height:48px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); background:var(--bg); color:var(--ink); cursor:pointer; transition:border-color .3s, transform .3s, background .3s, color .3s, box-shadow .3s; }
#wdi-ux-page .iv4-arrow svg{ width:18px; height:18px; }
#wdi-ux-page .iv4-arrow:hover{ border-color:transparent; background:var(--ink); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,12,14,.16); }
#wdi-ux-page .iv4-arrow:active{ transform:translateY(0) scale(.96); }
#wdi-ux-page .iv4-progress{ position:relative; width:min(240px,38vw); height:3px; border-radius:3px; background:var(--line-2); overflow:hidden; }
#wdi-ux-page .iv4-progress-fill{ position:absolute; left:0; top:0; bottom:0; width:14%; border-radius:3px; background:linear-gradient(90deg,var(--rose-600),var(--rose-400)); transition:width .5s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .iv4-count{ font-size:13px; font-weight:600; color:var(--muted); font-feature-settings:"tnum" 1; min-width:64px; text-align:center; }

/* ============================================================
   VARIANT F — TECHNICAL INDEX (matches "How We Create")
   ============================================================ */
#wdi-ux-page .iv6-panel{ margin-top:clamp(34px,5vw,56px); display:grid; grid-template-columns:0.78fr 1.22fr; gap:0; border:1px solid var(--line); border-radius:32px; overflow:hidden; background:var(--bg); box-shadow:0 30px 70px rgba(11,12,14,.08); }
#wdi-ux-page .iv6-rail{ border-right:1px solid var(--line); background:var(--bg-2); padding:14px; }
#wdi-ux-page .iv6-tab{ position:relative; display:flex; align-items:center; gap:16px; width:100%; text-align:left; font-family:var(--font); background:none; border:none; border-radius:18px; cursor:pointer; padding:18px 20px; color:var(--ink-2); transition:color .3s, background .3s; }
#wdi-ux-page .iv6-tab-idx{ font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--faint); font-feature-settings:"tnum" 1; transition:color .3s; }
#wdi-ux-page .iv6-tab-name{ font-size:16px; font-weight:500; letter-spacing:-.02em; line-height:1.15; transition:color .3s; }
#wdi-ux-page .iv6-tab-arrow{ margin-left:auto; width:16px; height:16px; color:var(--rose-500); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; }
#wdi-ux-page .iv6-tab-arrow svg{ width:16px; height:16px; }
#wdi-ux-page .iv6-tab::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 60%,var(--violet)); transform:scaleY(0); transform-origin:center; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .iv6-tab:hover{ color:var(--ink); background:var(--bg); }
#wdi-ux-page .iv6-tab.active{ color:var(--ink); background:var(--bg); box-shadow:0 6px 20px rgba(11,12,14,.06); }
#wdi-ux-page .iv6-tab.active::before{ transform:scaleY(1); }
#wdi-ux-page .iv6-tab.active .iv6-tab-idx{ color:var(--rose-600); }
#wdi-ux-page .iv6-tab.active .iv6-tab-arrow{ opacity:1; transform:none; }

#wdi-ux-page .iv6-detail{ position:relative; padding:clamp(30px,3.6vw,52px); display:flex; flex-direction:column; min-height:520px; }
/* grid-stacked crossfading cards (no innerHTML churn) */
#wdi-ux-page .iv6-cards{ display:grid; flex:1; }
#wdi-ux-page .iv6-card{ grid-area:1/1; display:flex; flex-direction:column; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .iv6-card.active{ opacity:1; transform:none; pointer-events:auto; }
#wdi-ux-page .iv6-detail-meta{ display:flex; align-items:center; gap:14px; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
#wdi-ux-page .iv6-detail-meta .seq{ color:var(--rose-600); }
#wdi-ux-page .iv6-detail-meta .ico{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(135deg,var(--hue,#E41252),color-mix(in srgb,var(--hue,#E41252) 55%,#000)); margin-left:auto; }
#wdi-ux-page .iv6-detail-meta .ico svg{ width:18px; height:18px; }
#wdi-ux-page .iv6-name{ margin:22px 0 0; font-size:clamp(28px,3.2vw,44px); font-weight:500; letter-spacing:-.035em; line-height:1.02; color:var(--ink); text-wrap:balance; }
#wdi-ux-page .iv6-desc{ margin:18px 0 0; font-size:16px; line-height:1.6; font-weight:300; color:var(--ink-2); max-width:54ch; }
#wdi-ux-page .iv6-rows{ margin:26px 0 0; border-top:1px solid var(--line); }
#wdi-ux-page .iv6-rrow{ display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:start; padding:15px 0; border-bottom:1px solid var(--line); }
#wdi-ux-page .iv6-rrow .k{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
#wdi-ux-page .iv6-rrow .v{ display:flex; flex-wrap:wrap; gap:7px; }
#wdi-ux-page .iv6-rrow .v i{ font-style:normal; font-size:13px; font-weight:500; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px; transition:border-color .3s, color .3s; }
#wdi-ux-page .iv6-rrow .v i:hover{ border-color:var(--rose-300); color:var(--ink); }
#wdi-ux-page .iv6-aeo{ margin:22px 0 0; padding-left:16px; border-left:3px solid var(--rose-500); font-size:13.5px; font-style:italic; line-height:1.55; font-weight:300; color:var(--muted); max-width:56ch; }
#wdi-ux-page .iv6-cta{ margin-top:auto; padding-top:30px; }

/* ============================================================
   SHARED CLOSER — AI NOTE + RECOMMENDATION
   ============================================================ */
#wdi-ux-page .ivv-closer{ background:var(--bg); }
#wdi-ux-page .ai-note{ position:relative; border-radius:26px; overflow:hidden; background:#0A0B0E; border:1px solid #16181d; padding:clamp(34px,5vw,64px); }
#wdi-ux-page .ai-note-mesh{ position:absolute; inset:0; z-index:0; background:radial-gradient(120% 130% at 100% 0%, rgba(249,47,100,.42), transparent 52%), radial-gradient(100% 120% at 0% 100%, rgba(122,0,255,.34), transparent 56%), radial-gradient(80% 80% at 50% 50%, rgba(0,229,255,.10), transparent 60%); }
#wdi-ux-page .ai-note-mesh::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(90% 90% at 70% 20%,#000,transparent 82%); mask-image:radial-gradient(90% 90% at 70% 20%,#000,transparent 82%); }
#wdi-ux-page .ai-note-inner{ position:relative; z-index:2; max-width:64ch; color:#fff; }
#wdi-ux-page .ai-note-badge{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:8px 14px 8px 11px; backdrop-filter:blur(6px); }
#wdi-ux-page .ai-note-badge svg{ width:17px; height:17px; }
#wdi-ux-page .ai-note-h{ margin:22px 0 0; font-size:clamp(24px,2.6vw,34px); font-weight:500; letter-spacing:-.025em; line-height:1.08; }
#wdi-ux-page .ai-note-p{ margin:16px 0 0; font-size:16px; line-height:1.62; font-weight:300; color:rgba(255,255,255,.84); }
#wdi-ux-page .ai-note-seo{ margin:14px 0 0; font-size:13.5px; line-height:1.6; font-weight:300; color:rgba(255,255,255,.56); max-width:74ch; }
#wdi-ux-page .ai-note-cta{ margin-top:26px; display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:500; color:var(--ink); background:#fff; border-radius:999px; padding:14px 22px; transition:transform .25s, background .25s, color .25s; }
#wdi-ux-page .ai-note-cta svg{ width:17px; height:17px; transition:transform .25s; }
#wdi-ux-page .ai-note-cta:hover{ background:var(--rose-500); color:#fff; transform:translateY(-2px); }
#wdi-ux-page .ai-note-cta:hover svg{ transform:translateX(3px); }

#wdi-ux-page .ivv-reco{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding:clamp(28px,3.4vw,40px); border:1px solid var(--line); border-radius:24px; background:radial-gradient(120% 160% at 100% 0%, rgba(249,47,100,.06), transparent 60%), var(--bg); position:relative; overflow:hidden; }
#wdi-ux-page .ivv-reco::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet)); }
#wdi-ux-page .ivv-reco-h{ margin:0; font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
#wdi-ux-page .ivv-reco-p{ margin:10px 0 0; font-size:15px; line-height:1.55; font-weight:300; color:var(--ink-2); max-width:66ch; text-wrap:pretty; }
#wdi-ux-page .ivv-reco-actions{ display:flex; gap:12px; flex-wrap:wrap; flex:none; }
#wdi-ux-page .ivv-closing{ margin:30px auto 0; max-width:72ch; text-align:center; font-size:15.5px; line-height:1.6; font-weight:300; color:var(--muted); text-wrap:pretty; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  #wdi-ux-page .iv3-grid{ grid-template-columns:repeat(2,1fr); }
  #wdi-ux-page .iv3-block:nth-child(1),#wdi-ux-page .iv3-block:nth-child(7){ grid-column:span 2; }
}
@media (max-width:880px){
  #wdi-ux-page .iv1-short{ display:none; }
  #wdi-ux-page .iv1-detail-in{ grid-template-columns:1fr; padding-left:0; gap:24px; }
  #wdi-ux-page .iv1-row.active .iv1-detail{ max-height:640px; }
  #wdi-ux-page .iv6-panel{ grid-template-columns:1fr; }
  #wdi-ux-page .iv6-rail{ border-right:none; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px; }
  #wdi-ux-page .iv6-tab{ width:auto; flex:1 1 40%; }
  #wdi-ux-page .iv6-tab::before{ left:14px; right:14px; top:auto; bottom:0; width:auto; height:3px; transform:scaleX(0); }
  #wdi-ux-page .iv6-tab.active::before{ transform:scaleX(1); }
  #wdi-ux-page .iv6-detail{ min-height:0; }
}
@media (max-width:620px){
  #wdi-ux-page .iv3-grid{ grid-template-columns:1fr; }
  #wdi-ux-page .iv3-block:nth-child(1),#wdi-ux-page .iv3-block:nth-child(7){ grid-column:auto; }
  #wdi-ux-page .iv3-reveal{ grid-template-rows:1fr; opacity:1; }
  #wdi-ux-page .iv4-name{ font-size:clamp(34px,11vw,52px); }
  #wdi-ux-page .iv6-rrow{ grid-template-columns:1fr; gap:8px; }
}
@media (prefers-reduced-motion:reduce){
  #wdi-ux-page *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  #wdi-ux-page .reveal{ opacity:1 !important; transform:none !important; }
  #wdi-ux-page .iv1d-track{ animation:none !important; }
}

/* ============================================================
   WDI — Engagement Models
   Cinematic three-act stage
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--rose-200:#FFB3C7;
  --violet:#7A00FF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;
  --rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* variant label */
#wdi-ux-page .em-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .em-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .em-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

/* section + header */
#wdi-ux-page .em-sec{position:relative;padding:120px 0 130px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .em-sec.alt{background:var(--bg-2);}
#wdi-ux-page .em-head{max-width:880px;position:relative;z-index:3;}
#wdi-ux-page .em-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .em-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .em-h{margin-top:22px;font-size:clamp(34px,4.2vw,54px);line-height:1.04;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .em-supp{margin-top:20px;font-size:clamp(17px,1.4vw,21px);line-height:1.45;font-weight:400;color:var(--ink-2);max-width:60ch;}
#wdi-ux-page .em-intro{margin-top:16px;font-size:15.5px;line-height:1.6;font-weight:400;color:var(--muted);max-width:72ch;}

/* shared CTA buttons */
#wdi-ux-page .em-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:500;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,box-shadow .3s;}
#wdi-ux-page .em-btn svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .em-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(228,18,82,.28);}
#wdi-ux-page .em-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .em-btn-ghost{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:14px 22px;text-decoration:none;transition:border-color .25s,transform .25s;}
#wdi-ux-page .em-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
#wdi-ux-page .em-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:color .25s,gap .25s;}
#wdi-ux-page .em-link svg{width:15px;height:15px;color:var(--rose-600);transition:transform .25s;}
#wdi-ux-page .em-link:hover{color:var(--rose-600);gap:12px;}
#wdi-ux-page .em-link:hover svg{transform:translateX(3px);}

/* section-level CTA banner */
#wdi-ux-page .em-cta{margin-top:64px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:38px 42px;border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.08),transparent 58%),var(--bg);}
#wdi-ux-page .em-sec.alt .em-cta{background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.08),transparent 58%),var(--bg);}
#wdi-ux-page .em-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet));}
#wdi-ux-page .em-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .em-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
#wdi-ux-page .em-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

/* ============================================================
   VARIANT A — CINEMATIC THREE-ACT STAGE
   ============================================================ */
#wdi-ux-page .ema-stack{margin-top:70px;display:flex;flex-direction:column;gap:24px;position:relative;z-index:2;}
#wdi-ux-page .ema-row{
  position:relative;display:grid;grid-template-columns:220px 1fr 220px;gap:40px;align-items:center;
  padding:52px 52px;border:1px solid var(--line);border-radius:32px;background:var(--bg);overflow:hidden;
  opacity:0;transform:translateY(40px) scale(.98);
  transition:opacity .9s ease,transform .95s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s;
}
#wdi-ux-page #engage-a.in .ema-row{opacity:1;transform:none;transition-delay:var(--d,0s);}
#wdi-ux-page .ema-row:hover{border-color:var(--rose-300);box-shadow:0 30px 70px rgba(11,12,14,.08);}

/* left: huge index + positioning pill */
#wdi-ux-page .ema-side{display:flex;flex-direction:column;gap:18px;}
#wdi-ux-page .ema-num{font-size:clamp(64px,6vw,92px);font-weight:300;line-height:.9;letter-spacing:-0.045em;font-feature-settings:"tnum" 1;
  background:linear-gradient(140deg,var(--rose-600),var(--rose-400) 55%,var(--rose-300));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .ema-pill{display:inline-flex;align-items:center;width:fit-content;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;}
#wdi-ux-page .ema-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));margin-right:8px;}

/* middle: editorial */
#wdi-ux-page .ema-main{min-width:0;}
#wdi-ux-page .ema-title{position:relative;font-size:clamp(26px,2.4vw,32px);font-weight:500;line-height:1.1;letter-spacing:-0.028em;color:var(--ink);text-wrap:balance;}
/* gradient sweep across title once on enter */
#wdi-ux-page .ema-title::after{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;background:linear-gradient(100deg,transparent,rgba(249,47,100,.12),rgba(122,0,255,.08),transparent);pointer-events:none;}
#wdi-ux-page #engage-a.in .ema-row .ema-title::after{animation:emTitleSweep 1.4s ease forwards;animation-delay:calc(var(--d,0s) + .35s);}
@keyframes emTitleSweep{to{left:120%;}}
#wdi-ux-page .ema-desc{margin-top:14px;font-size:15.5px;font-weight:400;line-height:1.55;color:var(--ink-2);}
#wdi-ux-page .ema-inc{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
#wdi-ux-page .ema-inc-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--rose-600);margin-bottom:12px;}
#wdi-ux-page .ema-list{display:flex;flex-direction:column;gap:10px;}
#wdi-ux-page .ema-li{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;font-size:14px;font-weight:400;line-height:1.45;color:var(--ink);
  opacity:0;transform:translateX(-6px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #engage-a.in .ema-row .ema-li{opacity:1;transform:none;transition-delay:calc(var(--d,0s) + .35s + var(--li,0s));}
#wdi-ux-page .ema-check{width:20px;height:20px;display:grid;place-items:center;color:var(--rose-500);}
#wdi-ux-page .ema-check svg{width:17px;height:17px;}
#wdi-ux-page .ema-best{margin-top:22px;font-size:13.5px;font-weight:400;line-height:1.5;color:var(--muted);padding-left:14px;border-left:2px solid var(--rose-300);}
#wdi-ux-page .ema-best b{display:block;font-weight:600;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--rose-600);margin-bottom:5px;}
#wdi-ux-page .ema-foot{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

/* right: refined visual mark */
#wdi-ux-page .ema-mark{position:relative;width:100%;height:200px;display:grid;place-items:center;}
#wdi-ux-page .ema-mark svg{width:100%;height:100%;overflow:visible;}
#wdi-ux-page .ema-mark .ring{fill:none;stroke:var(--line-2);stroke-width:1;}
#wdi-ux-page .ema-mark .dot{fill:var(--rose-500);}
#wdi-ux-page .ema-mark .glow{fill:url(#emaGlow);opacity:.4;animation:emPulse 4s ease-in-out infinite;transform-origin:center;}
@keyframes emPulse{0%,100%{opacity:.35;transform:scale(.95);}50%{opacity:.65;transform:scale(1.05);}}
#wdi-ux-page .ema-mark .orbit{animation:emSpin 22s linear infinite;transform-origin:center;}
@keyframes emSpin{to{transform:rotate(360deg);}}
#wdi-ux-page .ema-mark .sweep{stroke:var(--rose-400);stroke-width:1.5;fill:none;animation:emSpin 14s linear infinite;transform-origin:center;}

/* featured (middle) row — dark */
#wdi-ux-page .ema-row.is-feat{background:#0B0C0E;border-color:#1A1C22;color:#fff;}
#wdi-ux-page .ema-row.is-feat:hover{border-color:#2A2D34;}
#wdi-ux-page .ema-row.is-feat .ema-pill{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
#wdi-ux-page .ema-row.is-feat .ema-title{color:#fff;}
#wdi-ux-page .ema-row.is-feat .ema-desc{color:rgba(255,255,255,.78);}
#wdi-ux-page .ema-row.is-feat .ema-inc{border-top-color:rgba(255,255,255,.10);}
#wdi-ux-page .ema-row.is-feat .ema-inc-label{color:var(--rose-300);}
#wdi-ux-page .ema-row.is-feat .ema-li{color:#fff;}
#wdi-ux-page .ema-row.is-feat .ema-check{color:var(--rose-300);}
#wdi-ux-page .ema-row.is-feat .ema-best{color:rgba(255,255,255,.72);border-left-color:var(--rose-400);}
#wdi-ux-page .ema-row.is-feat .ema-best b{color:var(--rose-300);}
#wdi-ux-page .ema-row.is-feat .ema-btn{background:#fff;color:var(--ink);}
#wdi-ux-page .ema-row.is-feat .ema-btn:hover{background:var(--rose-500);color:#fff;}
#wdi-ux-page .ema-row.is-feat .ema-link{color:#fff;}
#wdi-ux-page .ema-row.is-feat .ema-mark .ring{stroke:rgba(255,255,255,.16);}
/* recommended badge — kept available but unused in DOM */
#wdi-ux-page .ema-flag{display:none;}

/* responsive */
@media(max-width:980px){
  #wdi-ux-page .ema-row{grid-template-columns:1fr;gap:22px;padding:44px 30px;}
  #wdi-ux-page .ema-mark{height:180px;max-width:240px;margin-left:auto;margin-right:auto;}
}
@media(max-width:760px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .em-sec{padding:80px 0 90px;}
  #wdi-ux-page .em-vtag{padding:22px 22px 0;}
  #wdi-ux-page .em-cta{padding:28px;gap:20px;}
  #wdi-ux-page .em-cta-actions{width:100%;}
  #wdi-ux-page .em-cta .em-btn,#wdi-ux-page .em-cta .em-btn-ghost{flex:1;justify-content:center;}
  #wdi-ux-page .ema-num{font-size:64px;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .ema-row,#wdi-ux-page .ema-li{opacity:1!important;transform:none!important;transition:none;}
  #wdi-ux-page .ema-mark .glow,#wdi-ux-page .ema-mark .orbit,#wdi-ux-page .ema-mark .sweep{animation:none;}
  #wdi-ux-page .ema-title::after{display:none;}
}

/* ============================================================
   WDI — Featured Case Studies  (Variants A + B)
   CMS-powered proof slots. No invented names / metrics.
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--violet:#7A00FF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

#wdi-ux-page .cs-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .cs-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .cs-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

#wdi-ux-page .cs-sec{position:relative;padding:104px 0 118px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .cs-sec.alt{background:var(--bg-2);}

/* header */
#wdi-ux-page .cs-head{max-width:860px;position:relative;z-index:2;}
#wdi-ux-page .cs-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .cs-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .cs-h{margin-top:20px;font-size:clamp(28px,3.4vw,44px);line-height:1.08;font-weight:500;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .cs-intro{margin-top:18px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;font-weight:300;color:var(--ink-2);text-wrap:pretty;max-width:72ch;}
#wdi-ux-page .cs-sub{margin-top:14px;font-size:15px;line-height:1.65;font-weight:400;color:var(--muted);max-width:72ch;text-wrap:pretty;}

/* shared bits */
#wdi-ux-page .cs-tag{font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap;transition:border-color .25s,color .25s,background .25s;}
#wdi-ux-page .cs-tag-ind{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .cs-tag-ind::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));}
#wdi-ux-page .cs-cms{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px dashed var(--line-2);border-radius:999px;padding:3px 9px;}
#wdi-ux-page .cs-cms::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--faint);}

#wdi-ux-page .cs-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:500;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,box-shadow .25s;}
#wdi-ux-page .cs-btn svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .cs-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
#wdi-ux-page .cs-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .cs-btn-ghost{display:inline-flex;align-items:center;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;transition:border-color .25s,transform .25s;}
#wdi-ux-page .cs-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
#wdi-ux-page .cs-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;transition:color .25s,gap .25s;}
#wdi-ux-page .cs-link svg{width:15px;height:15px;color:var(--rose-600);transition:transform .25s;}
#wdi-ux-page .cs-link:hover{color:var(--rose-600);gap:11px;}
#wdi-ux-page .cs-link:hover svg{transform:translateX(3px);}

/* section CTA */
#wdi-ux-page .cs-cta{margin-top:56px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:38px 42px;border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.07),transparent 58%),var(--bg);}
#wdi-ux-page .cs-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet));}
#wdi-ux-page .cs-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .cs-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:60ch;}
#wdi-ux-page .cs-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

/* abstract visual helper (shared) */
#wdi-ux-page .cs-viz{position:relative;background:#0a0b0e;overflow:hidden;}
#wdi-ux-page .cs-viz-mesh{position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .cs-viz-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(80% 85% at 70% 30%,#000,transparent 84%);mask-image:radial-gradient(80% 85% at 70% 30%,#000,transparent 84%);}
#wdi-ux-page .cs-viz-ico{position:absolute;color:#fff;opacity:.95;filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));}
#wdi-ux-page .cs-viz-ico svg{width:100%;height:100%;}
#wdi-ux-page .cs-viz-case{position:absolute;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);}

/* ============================================================
   VARIANT A — PROOF LEDGER (full-width case rows)
   ============================================================ */
#wdi-ux-page .csa-body{margin-top:64px;position:relative;z-index:2;border-top:1px solid var(--line);}
#wdi-ux-page .csa-row{
  display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:stretch;
  padding:42px 0;border-bottom:1px solid var(--line);
  transform:translateY(26px);
}
#wdi-ux-page #cases-a.in .csa-row{animation:csRise .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d);}
@keyframes csRise{to{transform:none;}}

/* left visual */
#wdi-ux-page .csa-viz{border-radius:22px;min-height:240px;box-shadow:0 18px 44px rgba(11,12,14,.10);}
#wdi-ux-page .csa-row:hover .cs-viz-mesh{transform:scale(1.06);}
#wdi-ux-page .csa-viz .cs-viz-ico{right:24px;bottom:22px;width:52px;height:52px;}
#wdi-ux-page .csa-viz .cs-viz-case{left:24px;top:22px;font-size:12px;}
#wdi-ux-page .csa-viz-summary{position:absolute;left:24px;right:24px;bottom:22px;color:#fff;font-size:14px;font-weight:300;line-height:1.45;z-index:2;max-width:30ch;}

/* right content */
#wdi-ux-page .csa-main{min-width:0;display:flex;flex-direction:column;}
#wdi-ux-page .csa-toprow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
#wdi-ux-page .csa-title{font-size:clamp(22px,2.3vw,29px);font-weight:500;letter-spacing:-0.025em;line-height:1.1;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .csa-oneline{margin-top:11px;font-size:15.5px;font-weight:300;line-height:1.5;color:var(--ink-2);max-width:60ch;}

/* structured proof: 3 hairline cells */
#wdi-ux-page .csa-proof{margin-top:24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;}
#wdi-ux-page .csa-cell{padding-top:14px;border-top:1px solid var(--line);}
#wdi-ux-page .csa-cell-label{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:9px;}
#wdi-ux-page .csa-cell-label::before{content:"";width:6px;height:6px;border-radius:50%;}
#wdi-ux-page .csa-cell.is-chal .csa-cell-label{color:#C2691B;}#wdi-ux-page .csa-cell.is-chal .csa-cell-label::before{background:#E8821E;}
#wdi-ux-page .csa-cell.is-sol .csa-cell-label{color:var(--rose-600);}#wdi-ux-page .csa-cell.is-sol .csa-cell-label::before{background:var(--rose-500);}
#wdi-ux-page .csa-cell.is-out .csa-cell-label{color:#5A1FD4;}#wdi-ux-page .csa-cell.is-out .csa-cell-label::before{background:var(--violet);}
#wdi-ux-page .csa-cell p{font-size:13px;font-weight:300;line-height:1.55;color:var(--ink-2);}
#wdi-ux-page .csa-cell.is-out.pending p{color:var(--faint);font-style:italic;}
#wdi-ux-page .csa-foot{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
#wdi-ux-page .csa-tags{display:flex;flex-wrap:wrap;gap:8px;}

/* ============================================================
   VARIANT B — FEATURED ASYMMETRIC
   ============================================================ */
#wdi-ux-page .csb-grid{margin-top:60px;position:relative;z-index:2;display:grid;grid-template-columns:1.32fr 1fr;gap:20px;}
#wdi-ux-page .csb-secondary{display:flex;flex-direction:column;gap:20px;}

#wdi-ux-page .csb-card{
  position:relative;border:1px solid var(--line);border-radius:24px;background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1);
  transform:translateY(24px);
}
#wdi-ux-page #cases-b.in .csb-card{animation:csRise .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d);}
#wdi-ux-page .csb-card:hover{border-color:var(--rose-300);box-shadow:0 22px 56px rgba(11,12,14,.10);transform:translateY(-4px);}
#wdi-ux-page #cases-b.in .csb-card:hover{transform:translateY(-4px);}
#wdi-ux-page .csb-card::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:4;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(249,47,100,.07),transparent 60%);opacity:0;transition:opacity .4s;}
#wdi-ux-page .csb-card:hover::after{opacity:1;}

/* featured (large) */
#wdi-ux-page .csb-feature .csb-viz{height:260px;}
#wdi-ux-page .csb-feature:hover .cs-viz-mesh{transform:scale(1.05);}
#wdi-ux-page .csb-viz .cs-viz-ico{right:26px;bottom:22px;width:54px;height:54px;}
#wdi-ux-page .csb-viz .cs-viz-case{left:26px;top:24px;font-size:12px;}
#wdi-ux-page .csb-feat-badge{position:absolute;right:24px;top:22px;z-index:2;white-space:nowrap;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:5px 11px;backdrop-filter:blur(6px);}
#wdi-ux-page .csb-body{padding:30px 32px 28px;display:flex;flex-direction:column;flex:1;}
#wdi-ux-page .csb-toprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:13px;}
#wdi-ux-page .csb-title{font-size:24px;font-weight:500;letter-spacing:-0.025em;line-height:1.12;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .csb-feature .csb-title{font-size:clamp(24px,2.4vw,30px);}
#wdi-ux-page .csb-oneline{margin-top:11px;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--muted);}

/* featured proof: 3-up; secondary: inline */
#wdi-ux-page .csb-proof{margin-top:22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
#wdi-ux-page .csb-cell{padding-top:13px;border-top:1px solid var(--line);}
#wdi-ux-page .csb-cell-label{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px;}
#wdi-ux-page .csb-cell-label::before{content:"";width:5px;height:5px;border-radius:50%;}
#wdi-ux-page .csb-cell.is-chal .csb-cell-label{color:#C2691B;}#wdi-ux-page .csb-cell.is-chal .csb-cell-label::before{background:#E8821E;}
#wdi-ux-page .csb-cell.is-sol .csb-cell-label{color:var(--rose-600);}#wdi-ux-page .csb-cell.is-sol .csb-cell-label::before{background:var(--rose-500);}
#wdi-ux-page .csb-cell.is-out .csb-cell-label{color:#5A1FD4;}#wdi-ux-page .csb-cell.is-out .csb-cell-label::before{background:var(--violet);}
#wdi-ux-page .csb-cell p{font-size:12.5px;font-weight:300;line-height:1.5;color:var(--ink-2);}
#wdi-ux-page .csb-cell.is-out.pending p{color:var(--faint);font-style:italic;}

/* secondary cards: compact horizontal */
#wdi-ux-page .csb-mini{flex:1;flex-direction:row;align-items:stretch;}
#wdi-ux-page .csb-mini .csb-viz{width:130px;flex:none;height:auto;border-radius:0;}
#wdi-ux-page .csb-mini .cs-viz-ico{right:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;}
#wdi-ux-page .csb-mini .cs-viz-case{left:14px;top:14px;font-size:10px;writing-mode:vertical-rl;text-orientation:mixed;}
#wdi-ux-page .csb-mini .csb-body{padding:24px 26px;}
#wdi-ux-page .csb-mini .csb-title{font-size:19px;}
#wdi-ux-page .csb-mini .csb-mini-proof{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
#wdi-ux-page .csb-mini .csb-mini-line{font-size:12px;font-weight:300;line-height:1.45;color:var(--ink-2);padding-left:13px;position:relative;}
#wdi-ux-page .csb-mini .csb-mini-line::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;}
#wdi-ux-page .csb-mini .csb-mini-line.is-chal::before{background:#E8821E;}
#wdi-ux-page .csb-mini .csb-mini-line.is-sol::before{background:var(--rose-500);}
#wdi-ux-page .csb-mini .csb-mini-line .l{display:block;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:2px;}
#wdi-ux-page .csb-foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
#wdi-ux-page .csb-tags{display:flex;flex-wrap:wrap;gap:7px;}
#wdi-ux-page .csb-mini .csb-foot{padding-top:16px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  #wdi-ux-page .csa-row{grid-template-columns:1fr;gap:24px;}
  #wdi-ux-page .csa-viz{min-height:200px;}
  #wdi-ux-page .csa-proof{grid-template-columns:1fr;gap:16px;}
  #wdi-ux-page .csb-grid{grid-template-columns:1fr;}
  #wdi-ux-page .csb-proof{grid-template-columns:1fr;gap:14px;}
}
@media(max-width:760px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .cs-sec{padding:70px 0 80px;}
  #wdi-ux-page .cs-vtag{padding:22px 22px 0;}
  #wdi-ux-page .csb-mini{flex-direction:column;}
  #wdi-ux-page .csb-mini .csb-viz{width:100%;height:120px;}
  #wdi-ux-page .csb-mini .cs-viz-case{writing-mode:horizontal-tb;}
  #wdi-ux-page .cs-cta{padding:26px;gap:20px;}
  #wdi-ux-page .cs-cta-actions{width:100%;}
  #wdi-ux-page .cs-cta .cs-btn,#wdi-ux-page .cs-btn-ghost{flex:1;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .csa-row,#wdi-ux-page .csb-card{transform:none!important;animation:none;}
  #wdi-ux-page .cs-viz-mesh{transition:none;}
}

/* ============================================================
   VARIANT C — INTERACTIVE PROOF SWITCHER (horizontal expand)
   ============================================================ */
#wdi-ux-page .csc-stage{margin-top:60px;position:relative;z-index:2;display:flex;gap:16px;height:520px;}
#wdi-ux-page .csc-panel{
  position:relative;flex:1;min-width:0;border-radius:24px;overflow:hidden;cursor:pointer;
  background:#0a0b0e;border:1px solid #15171d;
  transition:flex .7s cubic-bezier(.22,1,.36,1),box-shadow .5s ease;
  transform:translateY(28px);
}
#wdi-ux-page #cases-c.in .csc-panel{transform:none;transition:flex .7s cubic-bezier(.22,1,.36,1),box-shadow .5s,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d);}
#wdi-ux-page .csc-panel.active{flex:3.4;box-shadow:0 30px 80px rgba(11,12,14,.22);}

/* per-panel mesh + parallax layers */
#wdi-ux-page .csc-mesh{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s;}
#wdi-ux-page .csc-panel:hover .csc-mesh{transform:scale(1.05);}
#wdi-ux-page .csc-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(80% 85% at 60% 35%,#000,transparent 84%);mask-image:radial-gradient(80% 85% at 60% 35%,#000,transparent 84%);}
#wdi-ux-page .csc-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,12,.15) 30%,rgba(8,9,12,.82) 100%);}
#wdi-ux-page .csc-ghost{position:absolute;right:18px;top:6px;font-size:150px;font-weight:200;line-height:1;letter-spacing:-0.05em;color:rgba(255,255,255,.07);font-feature-settings:"tnum" 1;pointer-events:none;}

/* single inner block: header always visible, reveal expands when active.
   Pinned bottom-left at the EXPANDED width so text never reflows; the
   collapsed (thin) panel simply clips it via overflow:hidden. */
#wdi-ux-page .csc-inner{position:absolute;left:0;bottom:0;z-index:3;width:680px;padding:32px;color:#fff;}
#wdi-ux-page .csc-head{display:flex;align-items:center;gap:15px;}
#wdi-ux-page .csc-ico{width:50px;height:50px;flex:none;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px);transition:background .4s,transform .4s;}
#wdi-ux-page .csc-ico svg{width:24px;height:24px;}
#wdi-ux-page .csc-panel.active .csc-ico{background:linear-gradient(135deg,var(--rose-600),var(--rose-400));border-color:transparent;transform:scale(1.05);}
#wdi-ux-page .csc-headtext{min-width:0;display:flex;flex-direction:column;gap:5px;}
#wdi-ux-page .csc-ind{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap;}
#wdi-ux-page .csc-title{font-size:21px;font-weight:500;letter-spacing:-0.02em;color:#fff;line-height:1.12;white-space:nowrap;}

/* reveal: collapses to 0 height when inactive (grid-rows), fades when active */
#wdi-ux-page .csc-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),opacity .45s ease;}
#wdi-ux-page .csc-panel.active .csc-reveal{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),opacity .5s ease .2s;}
#wdi-ux-page .csc-reveal-in{overflow:hidden;min-height:0;padding-top:22px;}
#wdi-ux-page .csc-toprow{margin-bottom:12px;}
#wdi-ux-page .csc-cms{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.3);border-radius:999px;padding:3px 9px;}
#wdi-ux-page .csc-oneline{font-size:14px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.82);max-width:50ch;}
#wdi-ux-page .csc-proof{margin-top:20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
#wdi-ux-page .csc-cell{padding-top:12px;border-top:1px solid rgba(255,255,255,.14);}
#wdi-ux-page .csc-cell-l{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px;}
#wdi-ux-page .csc-cell-l::before{content:"";width:5px;height:5px;border-radius:50%;}
#wdi-ux-page .csc-cell.is-chal .csc-cell-l{color:#FFB27A;}#wdi-ux-page .csc-cell.is-chal .csc-cell-l::before{background:#E8821E;}
#wdi-ux-page .csc-cell.is-sol .csc-cell-l{color:var(--rose-300);}#wdi-ux-page .csc-cell.is-sol .csc-cell-l::before{background:var(--rose-400);}
#wdi-ux-page .csc-cell.is-out .csc-cell-l{color:#C9A6FF;}#wdi-ux-page .csc-cell.is-out .csc-cell-l::before{background:var(--violet);}
#wdi-ux-page .csc-cell p{font-size:12px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.74);}
#wdi-ux-page .csc-cell.is-out.pending p{font-style:italic;color:rgba(255,255,255,.5);}
#wdi-ux-page .csc-foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
#wdi-ux-page .csc-tags{display:flex;flex-wrap:wrap;gap:7px;}
#wdi-ux-page .csc-tag{font-size:11px;font-weight:500;color:rgba(255,255,255,.86);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px;}
#wdi-ux-page .csc-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:#fff;text-decoration:none;transition:gap .25s;white-space:nowrap;}
#wdi-ux-page .csc-link .ar{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));}
#wdi-ux-page .csc-link .ar svg{width:15px;height:15px;}
#wdi-ux-page .csc-link:hover{gap:11px;}
#wdi-ux-page .csc-hint{margin-top:18px;font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:8px;}
#wdi-ux-page .csc-hint .k{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line-2);border-radius:6px;font-size:11px;color:var(--muted);}

@media(max-width:980px){
  /* mobile: clean vertical accordion — inner flows in normal layout */
  #wdi-ux-page .csc-stage{flex-direction:column;height:auto;gap:12px;}
  #wdi-ux-page .csc-panel{flex:none;}
  #wdi-ux-page .csc-panel.active{flex:none;box-shadow:0 18px 50px rgba(11,12,14,.16);}
  #wdi-ux-page .csc-inner{position:relative;width:100%;padding:24px;}
  #wdi-ux-page .csc-ghost{font-size:96px;top:auto;bottom:-12px;}
  #wdi-ux-page .csc-title{white-space:normal;}
  #wdi-ux-page .csc-proof{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  #wdi-ux-page .csc-proof{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .csc-panel{opacity:1!important;transform:none!important;}
}

/* WDI — Testimonials · 3 variants */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;
  --violet:#7A00FF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1320px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
#wdi-ux-page .ts-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .ts-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .ts-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

#wdi-ux-page .ts-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .ts-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .ts-h{margin-top:22px;font-size:clamp(32px,3.8vw,52px);line-height:1.04;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .ts-sub{margin-top:20px;font-size:clamp(15px,1.25vw,17.5px);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:54ch;}

#wdi-ux-page .ts-key{
  position:relative;
  background:linear-gradient(120deg,var(--rose-600),var(--violet) 50%,var(--rose-400));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:600;
  animation:tsKeyShift 6s ease-in-out infinite,tsKeyGlow 4.5s ease-in-out infinite;
}
@keyframes tsKeyShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@keyframes tsKeyGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(249,47,100,0)) drop-shadow(0 0 0 rgba(122,0,255,0));}
  50%{filter:drop-shadow(0 0 10px rgba(249,47,100,.55)) drop-shadow(0 0 18px rgba(122,0,255,.35));}
}
#wdi-ux-page .tsc-card .ts-key{
  background:linear-gradient(120deg,#FF6F92,#FFB3FF 50%,#FFC2D2);
  -webkit-background-clip:text;background-clip:text;
}

#wdi-ux-page .ts-arrow{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);
  display:grid;place-items:center;color:var(--ink);cursor:pointer;
  transition:border-color .3s,background .3s,transform .3s,color .3s;
}
#wdi-ux-page .ts-arrow:hover{border-color:var(--rose-300);background:#fff;transform:translateY(-2px);color:var(--rose-600);}
#wdi-ux-page .ts-arrow svg{width:18px;height:18px;}

/* VARIANT A */
#wdi-ux-page .tsa-sec{padding:100px 0 130px;background:var(--bg-2);border-top:1px solid var(--line);position:relative;overflow:hidden;}
#wdi-ux-page .tsa-grid{display:grid;grid-template-columns:0.65fr 1.35fr;gap:60px;align-items:start;}
#wdi-ux-page .tsa-left{position:sticky;top:80px;display:flex;flex-direction:column;gap:36px;}
#wdi-ux-page .tsa-arrows{display:flex;align-items:center;gap:14px;}
#wdi-ux-page .tsa-count{font-size:13.5px;font-weight:500;color:var(--muted);}
#wdi-ux-page .tsa-count b{color:var(--ink);font-feature-settings:"tnum" 1;}

#wdi-ux-page .tsa-rail{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
          mask-image:linear-gradient(90deg,#000 88%,transparent);}
#wdi-ux-page .tsa-track{display:flex;gap:20px;transition:transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform;}
#wdi-ux-page .tsa-card{
  flex:0 0 380px;display:flex;flex-direction:column;justify-content:space-between;
  padding:32px 32px 28px;background:var(--bg);border:1px solid var(--line);border-radius:24px;
  min-height:380px;box-shadow:0 18px 44px rgba(11,12,14,.06);
  transition:border-color .45s,box-shadow .45s,transform .45s,opacity .45s;
  opacity:.62;
}
#wdi-ux-page .tsa-card.active{opacity:1;border-color:var(--rose-300);box-shadow:0 30px 70px rgba(249,47,100,.14);}
#wdi-ux-page .tsa-card .qmark{font-size:42px;font-weight:600;color:var(--rose-400);line-height:0;margin-bottom:18px;}
#wdi-ux-page .tsa-card .quote{font-size:17px;font-weight:400;line-height:1.5;color:var(--ink);text-wrap:pretty;}
#wdi-ux-page .tsa-card .author{margin-top:28px;display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--line);}
#wdi-ux-page .tsa-card .av{width:48px;height:48px;border-radius:50%;background:#eee;overflow:hidden;flex:none;}
#wdi-ux-page .tsa-card .av img{width:100%;height:100%;object-fit:cover;}
#wdi-ux-page .tsa-card .name{font-size:14.5px;font-weight:500;color:var(--ink);}
#wdi-ux-page .tsa-card .role{margin-top:2px;font-size:12.5px;color:var(--muted);}

/* VARIANT B */
#wdi-ux-page .tsb-sec{padding:100px 0 130px;background:var(--bg);border-top:1px solid var(--line);}
#wdi-ux-page .tsb-head{text-align:center;max-width:680px;margin:0 auto 56px;}
#wdi-ux-page .tsb-head .ts-h .accent{color:var(--rose-600);}
#wdi-ux-page .tsb-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:14px;}
#wdi-ux-page .tsb-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:24px 26px;border:1px solid var(--line);border-radius:18px;background:var(--bg);transition:border-color .35s,box-shadow .35s,transform .35s;}
#wdi-ux-page .tsb-tile:hover{border-color:var(--rose-300);transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,12,14,.06);}
#wdi-ux-page .tsb-tile .quote{font-size:15px;font-weight:400;line-height:1.5;color:var(--ink);}
#wdi-ux-page .tsb-tile .author{margin-top:18px;display:flex;align-items:center;gap:11px;}
#wdi-ux-page .tsb-tile .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#eee;flex:none;}
#wdi-ux-page .tsb-tile .av img{width:100%;height:100%;object-fit:cover;}
#wdi-ux-page .tsb-tile .name{font-size:13px;font-weight:500;color:var(--ink);}
#wdi-ux-page .tsb-tile .role{margin-top:1px;font-size:11.5px;color:var(--muted);}
#wdi-ux-page .tsb-tile.dark{background:linear-gradient(160deg,#0E0F12,#16181E);color:#fff;border-color:transparent;}
#wdi-ux-page .tsb-tile.dark .quote,#wdi-ux-page .tsb-tile.dark .name{color:#fff;}
#wdi-ux-page .tsb-tile.dark .role{color:rgba(255,255,255,.6);}
#wdi-ux-page .tsb-tile.lg{grid-column:span 4;grid-row:span 2;}
#wdi-ux-page .tsb-tile.md{grid-column:span 3;}
#wdi-ux-page .tsb-tile.sm{grid-column:span 2;}
#wdi-ux-page .tsb-tile.lg .quote{font-size:21px;font-weight:500;letter-spacing:-0.015em;line-height:1.4;}
#wdi-ux-page .tsb-tile.md .quote{font-size:16.5px;}

/* VARIANT C — Editorial spotlight + avatar cluster */
#wdi-ux-page .tsc-sec{position:relative;padding:120px 0 150px;background:#0E0F12;color:#fff;border-top:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .tsc-sec .stage-bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(circle at 30% 30%,rgba(249,47,100,.30),transparent 50%),
  radial-gradient(circle at 75% 70%,rgba(122,0,255,.28),transparent 55%),
  radial-gradient(circle at 50% 90%,rgba(253,59,111,.18),transparent 55%);
  filter:blur(40px);animation:tscDrift 18s ease-in-out infinite alternate;}
@keyframes tscDrift{from{transform:scale(1) translate(0,0);}to{transform:scale(1.15) translate(-30px,30px);}}
#wdi-ux-page .tsc-sec .stage-noise{position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 80%);
          mask-image:radial-gradient(ellipse at center,#000,transparent 80%);opacity:.6;}

#wdi-ux-page .tsc-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.45fr 0.7fr;gap:70px;align-items:start;}

/* LEFT — editorial featured quote */
#wdi-ux-page .tsc-feat{display:flex;flex-direction:column;}
#wdi-ux-page .tsc-meta{display:flex;align-items:center;gap:14px;margin-bottom:30px;color:rgba(255,255,255,.55);font-size:13px;font-weight:500;letter-spacing:.04em;}
#wdi-ux-page .tsc-meta .ts-eyebrow{color:var(--rose-300);}
#wdi-ux-page .tsc-meta .ts-eyebrow::before{box-shadow:0 0 12px rgba(249,47,100,.6);}
#wdi-ux-page .tsc-meta .divider{width:32px;height:1px;background:rgba(255,255,255,.18);}
#wdi-ux-page .tsc-meta .counter b{color:#fff;font-feature-settings:"tnum" 1;font-weight:600;}

#wdi-ux-page .tsc-qmark{font-family:Georgia,serif;font-size:120px;line-height:0.8;color:transparent;
  background:linear-gradient(120deg,var(--rose-500),var(--violet) 50%,var(--rose-300));
  -webkit-background-clip:text;background-clip:text;
  margin-bottom:18px;display:block;height:60px;}

#wdi-ux-page .tsc-quote{font-size:clamp(22px,2.4vw,34px);font-weight:400;letter-spacing:-0.02em;line-height:1.32;color:#fff;text-wrap:pretty;
  transition:opacity .5s ease;}
#wdi-ux-page .tsc-quote.swap{opacity:0;transform:translateY(8px);}

#wdi-ux-page .tsc-author{margin-top:42px;display:flex;align-items:center;gap:18px;}
#wdi-ux-page .tsc-author .av{width:62px;height:62px;border-radius:50%;overflow:hidden;flex:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);position:relative;}
#wdi-ux-page .tsc-author .av::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 90deg,var(--rose-500),var(--violet),var(--rose-300),var(--rose-500));
  z-index:-1;filter:blur(6px);opacity:.7;animation:tscRing 8s linear infinite;}
@keyframes tscRing{to{transform:rotate(360deg);}}
#wdi-ux-page .tsc-author .av img{width:100%;height:100%;object-fit:cover;}
#wdi-ux-page .tsc-author .name{font-size:17px;font-weight:500;color:#fff;letter-spacing:-0.01em;}
#wdi-ux-page .tsc-author .role{margin-top:3px;font-size:13.5px;color:rgba(255,255,255,.65);}

#wdi-ux-page .tsc-controls{margin-top:48px;display:flex;align-items:center;gap:14px;}
#wdi-ux-page .tsc-controls .ts-arrow{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px);}
#wdi-ux-page .tsc-controls .ts-arrow:hover{background:rgba(255,255,255,.12);border-color:var(--rose-300);color:#fff;}
#wdi-ux-page .tsc-progress{flex:1;max-width:200px;height:2px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden;position:relative;}
#wdi-ux-page .tsc-progress::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,12%);
  background:linear-gradient(90deg,var(--rose-500),var(--violet));transition:width .5s ease;}

/* RIGHT — avatar voice list */
#wdi-ux-page .tsc-list{display:flex;flex-direction:column;gap:8px;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  max-height:560px;overflow:hidden;padding:24px 4px;}
#wdi-ux-page .tsc-list-inner{display:flex;flex-direction:column;gap:10px;animation:tscScroll 30s linear infinite;}
@keyframes tscScroll{from{transform:translateY(0);}to{transform:translateY(-50%);}}
#wdi-ux-page .tsc-list:hover .tsc-list-inner{animation-play-state:paused;}

#wdi-ux-page .tsc-voice{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  cursor:pointer;transition:background .3s,border-color .3s,transform .3s;}
#wdi-ux-page .tsc-voice:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);transform:translateX(-3px);}
#wdi-ux-page .tsc-voice.active{background:linear-gradient(120deg,rgba(249,47,100,.18),rgba(122,0,255,.14));border-color:var(--rose-300);box-shadow:0 0 0 1px rgba(249,47,100,.20),0 20px 40px rgba(249,47,100,.18);}
#wdi-ux-page .tsc-voice .av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:rgba(255,255,255,.10);}
#wdi-ux-page .tsc-voice .av img{width:100%;height:100%;object-fit:cover;}
#wdi-ux-page .tsc-voice .info{min-width:0;}
#wdi-ux-page .tsc-voice .vname{font-size:13.5px;font-weight:500;color:#fff;letter-spacing:-0.005em;}
#wdi-ux-page .tsc-voice .vrole{margin-top:2px;font-size:11.5px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#wdi-ux-page .tsc-voice .vbar{margin-left:auto;flex:none;width:3px;height:18px;border-radius:3px;background:rgba(255,255,255,.10);}
#wdi-ux-page .tsc-voice.active .vbar{background:linear-gradient(180deg,var(--rose-500),var(--violet));}

@media(max-width:1000px){
  #wdi-ux-page .tsa-grid{grid-template-columns:1fr;gap:32px;}
  #wdi-ux-page .tsa-left{position:relative;top:0;}
  #wdi-ux-page .tsa-card{flex:0 0 320px;min-height:340px;}
  #wdi-ux-page .tsb-grid{grid-template-columns:repeat(4,1fr);}
  #wdi-ux-page .tsb-tile.lg{grid-column:span 4;grid-row:auto;}
  #wdi-ux-page .tsb-tile.md{grid-column:span 2;}
  #wdi-ux-page .tsb-tile.sm{grid-column:span 2;}
  #wdi-ux-page .tsc-stage{grid-template-columns:1fr;}
  #wdi-ux-page .tsc-side .tsc-card{transform:none!important;}
}
@media(max-width:640px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .tsb-grid{grid-template-columns:1fr;}
  #wdi-ux-page .tsb-tile.lg,#wdi-ux-page .tsb-tile.md,#wdi-ux-page .tsb-tile.sm{grid-column:auto;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .ts-key,#wdi-ux-page .tsa-track,#wdi-ux-page .tsc-sec .stage-bg{animation:none;transition:none;}
}

/* ============================================================
   WDI — FAQs & Answer Bank  (Variants A–E)
   WDI system: rose accent, ink type, Figtree, light.
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--violet:#7A00FF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

#wdi-ux-page .fq-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .fq-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .fq-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

#wdi-ux-page .fq-sec{position:relative;padding:104px 0 118px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .fq-sec.alt{background:var(--bg-2);}

#wdi-ux-page .fq-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .fq-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .fq-h{margin-top:20px;font-size:clamp(30px,3.6vw,50px);line-height:1.04;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .fq-aeo{margin-top:20px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;font-weight:300;color:var(--ink-2);text-wrap:pretty;max-width:62ch;}
#wdi-ux-page .fq-supp{margin-top:14px;font-size:15px;line-height:1.65;font-weight:400;color:var(--muted);max-width:62ch;text-wrap:pretty;}

#wdi-ux-page .fq-tag{font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap;}
#wdi-ux-page .fq-tags{display:flex;flex-wrap:wrap;gap:7px;}

/* section CTA */
#wdi-ux-page .fq-cta{margin-top:60px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:38px 42px;border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.07),transparent 58%),var(--bg);}
#wdi-ux-page .fq-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet));}
#wdi-ux-page .fq-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .fq-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
#wdi-ux-page .fq-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}
#wdi-ux-page .fq-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:500;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,box-shadow .25s;}
#wdi-ux-page .fq-btn svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .fq-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
#wdi-ux-page .fq-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .fq-btn-ghost{display:inline-flex;align-items:center;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;transition:border-color .25s,transform .25s;}
#wdi-ux-page .fq-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

/* plus/minus toggle */
#wdi-ux-page .fq-pm{position:relative;flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .3s,border-color .3s;}
#wdi-ux-page .fq-pm::before,#wdi-ux-page .fq-pm::after{content:"";position:absolute;width:13px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s;}
#wdi-ux-page .fq-pm::after{transform:rotate(90deg);}
#wdi-ux-page .fq-open .fq-pm{background:var(--ink);border-color:var(--ink);}
#wdi-ux-page .fq-open .fq-pm::before,#wdi-ux-page .fq-open .fq-pm::after{background:#fff;}
#wdi-ux-page .fq-open .fq-pm::after{transform:rotate(0deg);}

/* collapsible body (grid-rows) */
#wdi-ux-page .fq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .fq-open .fq-panel{grid-template-rows:1fr;}
#wdi-ux-page .fq-panel-clip{overflow:hidden;}

/* ============================================================
   VARIANT A — MINIMAL SPLIT (sticky header left, accordion right)
   ============================================================ */
#wdi-ux-page .fqa-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:start;}
#wdi-ux-page .fqa-head{position:sticky;top:100px;align-self:start;}
#wdi-ux-page .fqa-list{border-top:1px solid var(--line);}
#wdi-ux-page .fqa-item{border-bottom:1px solid var(--line);}
#wdi-ux-page .fqa-q{display:flex;align-items:center;gap:20px;width:100%;padding:26px 0;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font);}
#wdi-ux-page .fqa-qtext{flex:1;font-size:18px;font-weight:500;letter-spacing:-0.015em;line-height:1.3;color:var(--ink);transition:color .25s;}
#wdi-ux-page .fqa-item:hover .fqa-qtext{color:var(--rose-700);}
#wdi-ux-page .fqa-panel-inner{padding:0 54px 28px 0;}
#wdi-ux-page .fqa-a{font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-2);}
#wdi-ux-page .fqa-meta{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#wdi-ux-page .fqa-meta-l{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}

/* ============================================================
   VARIANT B — GROOVY HIGHLIGHT (animated gradient headline)
   ============================================================ */
#wdi-ux-page .fqb-head{max-width:880px;margin:0 auto;text-align:center;}
#wdi-ux-page .fqb-h{font-size:clamp(34px,5vw,68px);line-height:1.02;font-weight:500;letter-spacing:-0.04em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .fqb-h .hl{background:linear-gradient(100deg,var(--rose-600),var(--violet) 35%,var(--rose-400) 70%,var(--rose-600));background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fqbFlow 7s linear infinite;}
@keyframes fqbFlow{to{background-position:280% 0;}}
#wdi-ux-page .fqb-list{margin-top:60px;max-width:880px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:14px;}
#wdi-ux-page .fqb-item{border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden;transition:border-color .3s,box-shadow .3s;}
#wdi-ux-page .fqb-item.fq-open{border-color:var(--rose-300);box-shadow:0 16px 40px rgba(11,12,14,.06);}
#wdi-ux-page .fqb-q{display:flex;align-items:center;gap:18px;width:100%;padding:24px 28px;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font);}
#wdi-ux-page .fqb-qtext{flex:1;font-size:18px;font-weight:500;letter-spacing:-0.015em;color:var(--ink);}
#wdi-ux-page .fqb-panel-inner{padding:0 28px 26px;}
#wdi-ux-page .fqb-a{font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-2);max-width:74ch;}
#wdi-ux-page .fqb-meta{margin-top:16px;}

/* ============================================================
   VARIANT C — INTERACTIVE HOVER-EXPAND (two columns)
   ============================================================ */
#wdi-ux-page .fqc-grid{margin-top:54px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
#wdi-ux-page .fqc-item{border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden;cursor:pointer;transition:border-color .35s,box-shadow .35s,transform .35s;}
#wdi-ux-page .fqc-item:hover,#wdi-ux-page .fqc-item.fq-open{border-color:var(--rose-300);box-shadow:0 18px 44px rgba(11,12,14,.08);}
#wdi-ux-page .fqc-q{display:flex;align-items:center;gap:16px;padding:24px 26px;}
#wdi-ux-page .fqc-num{font-size:12px;font-weight:600;color:var(--rose-600);font-feature-settings:"tnum" 1;}
#wdi-ux-page .fqc-qtext{flex:1;font-size:17px;font-weight:500;letter-spacing:-0.015em;line-height:1.3;color:var(--ink);}
#wdi-ux-page .fqc-panel-inner{padding:0 26px 26px 56px;}
#wdi-ux-page .fqc-a{font-size:14.5px;font-weight:300;line-height:1.6;color:var(--ink-2);}
#wdi-ux-page .fqc-meta{margin-top:14px;}

/* ============================================================
   VARIANT D — ASK PANEL (floating ? opens a blurred overlay)
   ============================================================ */
#wdi-ux-page .fqd-sec{text-align:center;}
#wdi-ux-page .fqd-launch{margin-top:46px;display:inline-flex;align-items:center;gap:14px;padding:18px 26px 18px 18px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg);cursor:pointer;font-family:var(--font);transition:border-color .3s,box-shadow .3s,transform .3s;}
#wdi-ux-page .fqd-launch:hover{border-color:var(--rose-300);box-shadow:0 16px 40px rgba(249,47,100,.12);transform:translateY(-2px);}
#wdi-ux-page .fqd-qmark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));color:#fff;font-size:24px;font-weight:600;box-shadow:0 8px 22px rgba(228,18,82,.3);}
#wdi-ux-page .fqd-launch-text{text-align:left;}
#wdi-ux-page .fqd-launch-text b{display:block;font-size:16px;font-weight:500;color:var(--ink);}
#wdi-ux-page .fqd-launch-text span{font-size:13px;color:var(--muted);}

#wdi-ux-page .fqd-overlay{position:fixed;inset:0;z-index:120;display:none;
  background:rgba(11,12,14,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity .4s ease;}
#wdi-ux-page .fqd-overlay.open{display:block;opacity:1;}
/* faded question list pinned to the left */
#wdi-ux-page .fqd-rail{position:absolute;left:0;top:0;bottom:0;width:340px;padding:90px 36px 40px;overflow-y:auto;}
#wdi-ux-page .fqd-rail-h{font-size:13px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.5);margin-bottom:22px;}
#wdi-ux-page .fqd-qbtn{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:11px 0;border:none;background:none;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:400;line-height:1.35;color:rgba(255,255,255,.55);transition:color .25s;}
#wdi-ux-page .fqd-qbtn .car{opacity:0;color:#fff;transition:opacity .25s;flex:none;}
#wdi-ux-page .fqd-qbtn:hover{color:rgba(255,255,255,.85);}
#wdi-ux-page .fqd-qbtn.active{color:#fff;font-weight:500;}
#wdi-ux-page .fqd-qbtn.active .car{opacity:1;}
/* centered modal card with image on top */
#wdi-ux-page .fqd-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(700px,calc(100% - 400px));max-height:90vh;
  background:var(--bg);border-radius:26px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);display:flex;flex-direction:column;
  opacity:0;transition:opacity .4s ease,transform .55s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .fqd-overlay.open .fqd-card{opacity:1;}
#wdi-ux-page .fqd-card.swap{opacity:0;transform:translate(-50%,-46%);}
#wdi-ux-page .fqd-card-media{position:relative;width:100%;height:230px;flex:none;background:#0c0d11;overflow:hidden;}
#wdi-ux-page .fqd-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
#wdi-ux-page .fqd-close{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(11,12,14,.25);cursor:pointer;display:grid;place-items:center;color:#fff;backdrop-filter:blur(6px);transition:background .25s,transform .25s;}
#wdi-ux-page .fqd-close:hover{background:rgba(11,12,14,.5);transform:rotate(90deg);}
#wdi-ux-page .fqd-close svg{width:18px;height:18px;}
#wdi-ux-page .fqd-card-body{padding:46px 48px 46px;overflow-y:auto;text-align:left;display:flex;flex-direction:column;align-items:center;}
#wdi-ux-page .fqd-card-body>*{width:100%;max-width:560px;}
#wdi-ux-page .fqd-main-type{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .fqd-main-q{margin-top:14px;font-size:32px;font-weight:500;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);}
#wdi-ux-page .fqd-main-a{margin-top:20px;font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2);}
#wdi-ux-page .fqd-main-meta{margin-top:26px;}
#wdi-ux-page .fqd-main-meta .fq-tags{justify-content:flex-start;}
/* ---- per-card extra module (inset card, like the reference) ---- */
#wdi-ux-page .fqd-extra{margin-top:30px;text-align:left;}
#wdi-ux-page .fqd-ex-cap{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;text-align:left;}
/* stats */
#wdi-ux-page .fqd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
#wdi-ux-page .fqd-stat{text-align:left;}
#wdi-ux-page .fqd-stat b{display:block;font-size:38px;font-weight:500;letter-spacing:-0.04em;line-height:1;color:var(--ink);}
#wdi-ux-page .fqd-stat span{display:block;margin-top:10px;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--muted);}
/* check list */
#wdi-ux-page .fqd-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;}
#wdi-ux-page .fqd-check{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:14px;font-weight:400;line-height:1.4;color:var(--ink-2);}
#wdi-ux-page .fqd-check svg{width:18px;height:18px;color:var(--rose-500);margin-top:1px;}
/* comparison bars — framed inset card */
#wdi-ux-page .fqd-bars{border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:18px;}
#wdi-ux-page .fqd-bar-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;}
#wdi-ux-page .fqd-bar-l{font-size:14px;font-weight:500;color:var(--ink);}
#wdi-ux-page .fqd-bar-v{font-size:13.5px;font-weight:500;color:var(--muted);text-align:right;font-feature-settings:"tnum" 1;}
#wdi-ux-page .fqd-bar-track{grid-column:1 / -1;height:6px;border-radius:5px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .fqd-bar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--rose-600),var(--rose-400));width:0;transition:width .9s cubic-bezier(.2,.7,.2,1) .25s;}
/* steps */
#wdi-ux-page .fqd-steps{display:flex;flex-direction:column;gap:0;}
#wdi-ux-page .fqd-step{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line);text-align:left;}
#wdi-ux-page .fqd-step:last-child{border-bottom:none;}
#wdi-ux-page .fqd-step-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--rose-soft);color:var(--rose-600);font-size:13px;font-weight:600;}
#wdi-ux-page .fqd-step b{display:block;font-size:14.5px;font-weight:500;color:var(--ink);}
#wdi-ux-page .fqd-step span{display:block;margin-top:3px;font-size:12.5px;font-weight:300;line-height:1.45;color:var(--muted);}
/* tag cloud */
#wdi-ux-page .fqd-cloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;}
#wdi-ux-page .fqd-fx{transform:translateY(8px);filter:blur(5px);}
#wdi-ux-page .fqd-fx.show{transform:none;filter:blur(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease;}

/* ============================================================
   VARIANT E — LIVE ANIMATED BG (hover-reveal cards over motion)
   ============================================================ */
#wdi-ux-page .fqe-sec{background:#0A0B0E;color:#fff;border-top:1px solid var(--line);}
#wdi-ux-page .fqe-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#wdi-ux-page .fqe-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;}
#wdi-ux-page .fqe-orb.o1{width:520px;height:520px;left:-120px;top:-80px;background:radial-gradient(circle,rgba(249,47,100,.5),transparent 65%);animation:fqeD1 16s ease-in-out infinite alternate;}
#wdi-ux-page .fqe-orb.o2{width:480px;height:480px;right:-100px;top:160px;background:radial-gradient(circle,rgba(122,0,255,.45),transparent 65%);animation:fqeD2 19s ease-in-out infinite alternate;}
#wdi-ux-page .fqe-orb.o3{width:420px;height:420px;left:40%;bottom:-160px;background:radial-gradient(circle,rgba(0,200,255,.3),transparent 65%);animation:fqeD3 22s ease-in-out infinite alternate;}
@keyframes fqeD1{to{transform:translate(80px,60px) scale(1.15);}}
@keyframes fqeD2{to{transform:translate(-70px,40px) scale(1.1);}}
@keyframes fqeD3{to{transform:translate(40px,-50px) scale(1.2);}}
#wdi-ux-page .fqe-grid-tex{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 78%);mask-image:radial-gradient(ellipse at center,#000,transparent 78%);}
#wdi-ux-page .fqe-sec .fq-eyebrow{color:var(--rose-300);}
#wdi-ux-page .fqe-sec .fq-h{color:#fff;}
#wdi-ux-page .fqe-sec .fq-aeo{color:rgba(255,255,255,.72);}
#wdi-ux-page .fqe-wrap{margin-top:54px;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#wdi-ux-page .fqe-item{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px);overflow:hidden;cursor:pointer;transition:border-color .35s,background .35s,box-shadow .35s,transform .35s;}
#wdi-ux-page .fqe-item:hover,#wdi-ux-page .fqe-item.fq-open{border-color:var(--rose-300);background:rgba(255,255,255,.07);box-shadow:0 20px 50px rgba(249,47,100,.16);transform:translateY(-3px);}
#wdi-ux-page .fqe-q{display:flex;align-items:center;gap:16px;padding:24px 26px;}
#wdi-ux-page .fqe-num{font-size:12px;font-weight:600;color:var(--rose-300);font-feature-settings:"tnum" 1;}
#wdi-ux-page .fqe-qtext{flex:1;font-size:17px;font-weight:500;letter-spacing:-0.015em;color:#fff;}
#wdi-ux-page .fqe-item .fq-pm{border-color:rgba(255,255,255,.24);}
#wdi-ux-page .fqe-item .fq-pm::before,#wdi-ux-page .fqe-item .fq-pm::after{background:#fff;}
#wdi-ux-page .fqe-item.fq-open .fq-pm{background:#fff;border-color:#fff;}
#wdi-ux-page .fqe-item.fq-open .fq-pm::before,#wdi-ux-page .fqe-item.fq-open .fq-pm::after{background:var(--ink);}
#wdi-ux-page .fqe-panel-inner{padding:0 26px 26px 56px;}
#wdi-ux-page .fqe-a{font-size:14.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.78);}
#wdi-ux-page .fqe-meta{margin-top:14px;}
#wdi-ux-page .fqe-meta .fq-tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.82);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:920px){
  #wdi-ux-page .fqa-grid{grid-template-columns:1fr;gap:34px;}
  #wdi-ux-page .fqa-head{position:relative;top:0;}
  #wdi-ux-page .fqc-grid,#wdi-ux-page .fqe-wrap{grid-template-columns:1fr;}
}
@media(max-width:920px){
  #wdi-ux-page .fqd-rail{position:absolute;width:100%;padding:78px 30px 20px;height:auto;bottom:auto;overflow:visible;}
  #wdi-ux-page .fqd-rail-h{display:none;}
  #wdi-ux-page .fqd-card{position:relative;left:0;top:0;transform:none;width:calc(100% - 40px);max-height:none;margin:210px auto 40px;}
  #wdi-ux-page .fqd-overlay{overflow-y:auto;}
  #wdi-ux-page .fqd-overlay.open .fqd-card{transform:none;}
}
@media(max-width:760px){
  #wdi-ux-page .fqd-card-media{height:200px;}
  #wdi-ux-page .fqd-card-body{padding:28px 24px;}
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .fq-sec{padding:70px 0 80px;}
  #wdi-ux-page .fq-vtag{padding:22px 22px 0;}
  #wdi-ux-page .fq-cta{padding:26px;gap:20px;}
  #wdi-ux-page .fq-cta-actions{width:100%;}
  #wdi-ux-page .fq-cta .fq-btn,#wdi-ux-page .fq-btn-ghost{flex:1;justify-content:center;}
  #wdi-ux-page .fqd-main{padding:30px 24px;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .fqb-h .hl{animation:none;}
  #wdi-ux-page .fqe-orb{animation:none;}
}

/* ============================================================
   WDI — Final CTA  (6 variants)
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--rose-200:#FFB3C7;--violet:#7A00FF;--violet-2:#A24BFF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

#wdi-ux-page .ct-vtag{max-width:var(--maxw);margin:0 auto;padding:30px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .ct-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .ct-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

#wdi-ux-page .ct-sec{position:relative;padding:90px 0 100px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}

/* shared buttons */
#wdi-ux-page .ct-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:15px;font-weight:500;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:15px 26px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,box-shadow .3s,border-color .25s,color .25s;}
#wdi-ux-page .ct-btn svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .ct-btn:hover{background:var(--rose-600);border-color:var(--rose-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(228,18,82,.26);}
#wdi-ux-page .ct-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .ct-btn.light{background:#fff;color:var(--ink);border-color:#fff;}
#wdi-ux-page .ct-btn.light:hover{background:var(--rose-600);color:#fff;border-color:var(--rose-600);}
#wdi-ux-page .ct-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
#wdi-ux-page .ct-btn.ghost:hover{background:transparent;color:var(--rose-600);border-color:var(--rose-300);box-shadow:none;}
#wdi-ux-page .ct-btn.ghost-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}
#wdi-ux-page .ct-btn.ghost-w:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff;box-shadow:none;}

/* eyebrow */
#wdi-ux-page .ct-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .ct-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}

/* ============================================================
   A — SPLIT CARD (ToDesktop style)
   ============================================================ */
#wdi-ux-page .cta-a-head{text-align:center;max-width:760px;margin:0 auto 44px;}
#wdi-ux-page .cta-a-head h2{font-size:clamp(34px,4.6vw,58px);font-weight:600;letter-spacing:-0.035em;line-height:1.02;color:var(--ink);}
#wdi-ux-page .cta-a-head p{margin-top:16px;font-size:17px;font-weight:300;color:var(--muted);}
#wdi-ux-page .cta-a-card{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:0;border-radius:28px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(120deg,#EDE7FB 0%,#FCE9EF 48%,#F7F7F9 100%);}
#wdi-ux-page .cta-a-left{padding:54px 52px;}
#wdi-ux-page .cta-a-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px;padding:7px 14px;backdrop-filter:blur(6px);}
#wdi-ux-page .cta-a-title{margin-top:20px;font-size:clamp(26px,2.8vw,36px);font-weight:600;letter-spacing:-0.03em;line-height:1.1;color:var(--ink);max-width:16ch;}
#wdi-ux-page .cta-a-desc{margin-top:16px;font-size:15.5px;font-weight:300;line-height:1.55;color:var(--ink-2);max-width:46ch;}
#wdi-ux-page .cta-a-feats{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;}
#wdi-ux-page .cta-a-feat{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;color:var(--ink-2);}
#wdi-ux-page .cta-a-feat svg{width:18px;height:18px;color:var(--rose-600);flex:none;}
#wdi-ux-page .cta-a-actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;}
#wdi-ux-page .cta-a-right{position:relative;background:rgba(255,255,255,.45);border-left:1px solid rgba(255,255,255,.6);padding:40px;display:flex;flex-direction:column;}
#wdi-ux-page .cta-a-mock-cap{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
#wdi-ux-page .cta-a-mock-cap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose-500);}
#wdi-ux-page .cta-a-mock{flex:1;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 50px rgba(11,12,14,.08);overflow:hidden;display:flex;flex-direction:column;min-height:300px;}
#wdi-ux-page .cta-a-mockbar{display:flex;align-items:center;gap:6px;padding:13px 16px;border-bottom:1px solid var(--line);}
#wdi-ux-page .cta-a-mockbar i{width:9px;height:9px;border-radius:50%;background:var(--line-2);}
#wdi-ux-page .cta-a-mockbody{padding:20px;display:flex;flex-direction:column;gap:14px;flex:1;}
#wdi-ux-page .cta-a-step{display:flex;align-items:center;gap:14px;padding:14px;border-radius:11px;border:1px solid var(--line);background:var(--bg-2);}
#wdi-ux-page .cta-a-step .n{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--rose-soft);color:var(--rose-600);}
#wdi-ux-page .cta-a-step b{display:block;font-size:13.5px;font-weight:500;color:var(--ink);}
#wdi-ux-page .cta-a-step span{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);}

/* ============================================================
   B — GRADIENT BANNER + PHONE (Deel style)
   ============================================================ */
#wdi-ux-page .cta-b{position:relative;border-radius:30px;overflow:hidden;background:linear-gradient(135deg,#2A0B40 0%,#7A00FF 46%,#FD3B6F 100%);min-height:420px;display:grid;grid-template-columns:1fr 1fr;align-items:center;}
#wdi-ux-page .cta-b-left{padding:64px 60px;color:#fff;position:relative;z-index:2;}
#wdi-ux-page .cta-b-left h2{font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-0.03em;line-height:1.05;color:#fff;max-width:15ch;}
#wdi-ux-page .cta-b-left p{margin-top:18px;font-size:16px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.85);max-width:40ch;}
#wdi-ux-page .cta-b-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;}
#wdi-ux-page .cta-b-actions .ct-btn{background:#0B0C0E;border-color:#0B0C0E;}
#wdi-ux-page .cta-b-actions .ct-btn:hover{background:#000;border-color:#000;}
#wdi-ux-page .cta-b-phonewrap{position:relative;height:100%;min-height:420px;overflow:hidden;}
#wdi-ux-page .cta-b-phone{position:absolute;right:14%;top:50%;transform:translateY(-46%);width:280px;max-width:62%;background:#0B0C0E;border-radius:38px;padding:9px;box-shadow:0 40px 80px rgba(0,0,0,.4);}
#wdi-ux-page .cta-b-screen{background:linear-gradient(180deg,#F3EEFE,#fff);border-radius:30px;overflow:hidden;padding:18px 16px;}
#wdi-ux-page .cta-b-pnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
#wdi-ux-page .cta-b-pnav .lg{font-size:16px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
#wdi-ux-page .cta-b-pnav .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--rose-500),var(--violet));}
#wdi-ux-page .cta-b-bal{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 8px 20px rgba(11,12,14,.05);}
#wdi-ux-page .cta-b-bal .lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
#wdi-ux-page .cta-b-bal .amt{margin-top:6px;font-size:24px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
#wdi-ux-page .cta-b-bal .amt span{font-size:13px;font-weight:400;color:var(--muted);}
#wdi-ux-page .cta-b-bal .act{margin-top:14px;background:var(--ink);color:#fff;border-radius:9px;padding:11px;text-align:center;font-size:12.5px;font-weight:500;}
#wdi-ux-page .cta-b-stat{margin-top:12px;display:flex;gap:8px;}
#wdi-ux-page .cta-b-stat>div{flex:1;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px;}
#wdi-ux-page .cta-b-stat .v{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;}
#wdi-ux-page .cta-b-stat .k{font-size:10px;color:var(--muted);margin-top:3px;}

/* ============================================================
   C — 3D BLOBS (Cohere style)
   ============================================================ */
#wdi-ux-page .cta-c{position:relative;border-radius:28px;overflow:hidden;background:#F5F0FB;border:1px solid var(--line);min-height:440px;display:flex;align-items:center;}
#wdi-ux-page .cta-c-content{position:relative;z-index:2;padding:64px 60px;max-width:560px;}
#wdi-ux-page .cta-c-content h2{font-size:clamp(30px,3.4vw,46px);font-weight:500;letter-spacing:-0.03em;line-height:1.04;color:var(--ink);}
#wdi-ux-page .cta-c-content p{margin-top:18px;font-size:16.5px;font-weight:300;line-height:1.5;color:var(--ink-2);max-width:40ch;}
#wdi-ux-page .cta-c-btn{margin-top:40px;display:inline-flex;align-items:stretch;border-radius:12px;overflow:hidden;text-decoration:none;}
#wdi-ux-page .cta-c-btn .lab{display:flex;align-items:center;padding:16px 22px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ink);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);padding-right:30px;}
#wdi-ux-page .cta-c-btn .arr{display:grid;place-items:center;width:56px;background:var(--ink);color:#fff;margin-left:-14px;transition:background .3s;}
#wdi-ux-page .cta-c-btn .arr svg{width:18px;height:18px;transition:transform .3s;}
#wdi-ux-page .cta-c-btn:hover .lab,#wdi-ux-page .cta-c-btn:hover .arr{background:var(--rose-600);}
#wdi-ux-page .cta-c-btn:hover .arr svg{transform:translateX(3px);}
#wdi-ux-page .cta-c-blobs{position:absolute;right:-40px;top:0;bottom:0;width:54%;z-index:1;}
#wdi-ux-page .cta-c-blob{position:absolute;border-radius:42% 58% 56% 44%/48% 42% 58% 52%;filter:blur(.5px);box-shadow:inset 0 20px 60px rgba(255,255,255,.4),0 30px 70px rgba(11,12,14,.18);}
#wdi-ux-page .cta-c-blob.b1{width:340px;height:380px;right:6%;top:14%;background:linear-gradient(150deg,#A24BFF,#5A1FD4 72%);transform:rotate(-12deg);animation:ctFloat1 14s ease-in-out infinite alternate;}
#wdi-ux-page .cta-c-blob.b2{width:280px;height:300px;right:-6%;top:34%;background:linear-gradient(150deg,#FD3B6F,#C40F46 75%);transform:rotate(14deg);animation:ctFloat2 16s ease-in-out infinite alternate;}
#wdi-ux-page .cta-c-blob.b3{width:200px;height:210px;right:30%;bottom:2%;background:linear-gradient(150deg,#3A2150,#0B0C0E 80%);transform:rotate(-6deg);animation:ctFloat1 12s ease-in-out infinite alternate-reverse;}
@keyframes ctFloat1{to{transform:translateY(-24px) rotate(-6deg);}}
@keyframes ctFloat2{to{transform:translateY(20px) rotate(8deg);}}

/* ============================================================
   D — MOTION-BLUR IMAGE (Tempo style)
   ============================================================ */
#wdi-ux-page .cta-d{position:relative;border-radius:6px;overflow:hidden;min-height:560px;color:#fff;
  background:linear-gradient(118deg,#0A0B0E 0%,#1C0A1E 28%,#5A1FD4 54%,#E41252 78%,#FD3B6F 100%);}
#wdi-ux-page .cta-d::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(98deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px),
  radial-gradient(120% 80% at 20% 30%,rgba(0,0,0,.5),transparent 60%);mix-blend-mode:overlay;}
#wdi-ux-page .cta-d-grain{position:absolute;inset:0;opacity:.5;background:
  linear-gradient(90deg,transparent,rgba(255,255,255,.08) 40%,transparent 41%,rgba(255,255,255,.05) 60%,transparent 61%);
  filter:blur(3px);animation:ctDrift 12s ease-in-out infinite alternate;}
@keyframes ctDrift{to{transform:translateX(40px);}}
#wdi-ux-page .cta-d h2{position:absolute;left:60px;top:56px;z-index:2;font-size:clamp(40px,5.4vw,76px);font-weight:400;letter-spacing:-0.03em;line-height:.98;color:#fff;max-width:13ch;text-shadow:0 2px 30px rgba(0,0,0,.3);}
#wdi-ux-page .cta-d-foot{position:absolute;right:60px;bottom:56px;z-index:2;max-width:440px;text-align:left;}
#wdi-ux-page .cta-d-foot p{font-size:18px;font-weight:300;line-height:1.4;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4);}
#wdi-ux-page .cta-d-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;}
#wdi-ux-page .cta-d-actions .ct-btn{border-radius:4px;}
#wdi-ux-page .cta-d-actions .ct-btn.light{background:#fff;color:#0B0C0E;border-color:#fff;}

/* ============================================================
   E — DARK DOT FIELD (Phantom style)
   ============================================================ */
#wdi-ux-page .cta-e{position:relative;border-radius:28px;overflow:hidden;background:#0C0D11;color:#fff;min-height:600px;display:grid;place-items:center;text-align:center;}
#wdi-ux-page .cta-e canvas{position:absolute;inset:0;z-index:0;}
#wdi-ux-page .cta-e-glyphs{position:absolute;left:0;right:0;top:54px;z-index:1;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:680px;margin:0 auto;opacity:.5;}
#wdi-ux-page .cta-e-glyphs i{width:14px;height:14px;background:var(--violet-2);border-radius:40% 60% 55% 45%;display:block;}
#wdi-ux-page .cta-e-glyphs i:nth-child(3n){border-radius:50%;}
#wdi-ux-page .cta-e-glyphs i:nth-child(4n){border-radius:2px;transform:rotate(45deg);background:var(--rose-400);}
#wdi-ux-page .cta-e-glyphs i:nth-child(5n){opacity:.5;}
#wdi-ux-page .cta-e-inner{position:relative;z-index:2;padding:60px 30px;}
#wdi-ux-page .cta-e-inner h2{font-size:clamp(40px,6vw,80px);font-weight:500;letter-spacing:-0.04em;line-height:1;color:#fff;}
#wdi-ux-page .cta-e-inner p{margin-top:20px;font-size:clamp(16px,1.6vw,20px);font-weight:300;color:rgba(255,255,255,.7);}
#wdi-ux-page .cta-e-inner .ct-btn{margin-top:38px;background:var(--violet-2);border-color:var(--violet-2);color:#fff;padding:17px 40px;font-size:16px;}
#wdi-ux-page .cta-e-inner .ct-btn:hover{background:var(--rose-500);border-color:var(--rose-500);}

/* ============================================================
   F — TEXT + PEOPLE PHOTO CLUSTER (ElevenLabs style)
   ============================================================ */
#wdi-ux-page .cta-f{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center;}
#wdi-ux-page .cta-f-left h2{font-size:clamp(30px,3.4vw,46px);font-weight:500;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);max-width:15ch;}
#wdi-ux-page .cta-f-left p{margin-top:16px;font-size:16px;font-weight:300;line-height:1.55;color:var(--ink-2);max-width:42ch;}
#wdi-ux-page .cta-f-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;}
#wdi-ux-page .cta-f-cluster{position:relative;height:440px;}
#wdi-ux-page .cta-f-ph{position:absolute;border-radius:16px;overflow:hidden;box-shadow:0 24px 50px rgba(11,12,14,.16);background:#0c0d11;}
#wdi-ux-page .cta-f-ph image-slot{width:100%;height:100%;display:block;}
#wdi-ux-page .cta-f-ph.p1{width:46%;height:48%;right:18%;top:0;z-index:3;}
#wdi-ux-page .cta-f-ph.p2{width:40%;height:42%;right:0;top:34%;z-index:2;}
#wdi-ux-page .cta-f-ph.p3{width:42%;height:52%;left:2%;top:24%;z-index:1;}
#wdi-ux-page .cta-f-ph.p4{width:30%;height:34%;left:30%;top:62%;z-index:4;}
#wdi-ux-page .cta-f-globalnote{margin-top:34px;font-size:13px;font-weight:300;line-height:1.55;color:var(--muted);max-width:54ch;border-top:1px solid var(--line);padding-top:18px;}

/* trust + closing (shared footer strip used under some variants) */
#wdi-ux-page .ct-trust{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line);}
#wdi-ux-page .ct-trust p{font-size:13.5px;font-weight:300;line-height:1.55;color:var(--muted);max-width:70ch;}
#wdi-ux-page .ct-close{margin-top:18px;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;}
#wdi-ux-page .ct-close b{background:linear-gradient(110deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* contact options row (used under A) */
#wdi-ux-page .ct-contact{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
#wdi-ux-page .ct-copt{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--bg);transition:border-color .3s,transform .3s,box-shadow .3s;text-decoration:none;}
#wdi-ux-page .ct-copt:hover{border-color:var(--rose-300);transform:translateY(-3px);box-shadow:0 14px 32px rgba(11,12,14,.06);}
#wdi-ux-page .ct-copt .ico{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--rose-soft);color:var(--rose-600);}
#wdi-ux-page .ct-copt .ico svg{width:21px;height:21px;}
#wdi-ux-page .ct-copt b{font-size:15px;font-weight:500;color:var(--ink);}
#wdi-ux-page .ct-copt span{display:block;margin-top:4px;font-size:12.5px;font-weight:300;line-height:1.45;color:var(--muted);}
#wdi-ux-page .ct-copt em{display:block;margin-top:6px;font-style:normal;font-size:12.5px;font-weight:500;color:var(--rose-600);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  #wdi-ux-page .cta-a-card{grid-template-columns:1fr;}
  #wdi-ux-page .cta-a-right{border-left:none;border-top:1px solid rgba(255,255,255,.6);}
  #wdi-ux-page .cta-b{grid-template-columns:1fr;}
  #wdi-ux-page .cta-b-phonewrap{min-height:300px;}
  #wdi-ux-page .cta-b-phone{position:relative;right:auto;top:auto;transform:none;margin:0 auto 30px;}
  #wdi-ux-page .cta-f{grid-template-columns:1fr;gap:30px;}
  #wdi-ux-page .cta-f-cluster{height:360px;}
  #wdi-ux-page .ct-contact{grid-template-columns:1fr;}
  #wdi-ux-page .cta-d h2{position:relative;left:0;top:0;padding:40px 30px 0;}
  #wdi-ux-page .cta-d-foot{position:relative;right:0;bottom:0;padding:24px 30px 40px;max-width:none;}
  #wdi-ux-page .cta-d{min-height:0;}
}
@media(max-width:680px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .ct-sec{padding:64px 0 72px;}
  #wdi-ux-page .ct-vtag{padding:22px 22px 0;}
  #wdi-ux-page .cta-a-left,#wdi-ux-page .cta-b-left,#wdi-ux-page .cta-c-content{padding:38px 28px;}
  #wdi-ux-page .cta-a-feats{grid-template-columns:1fr;}
  #wdi-ux-page .cta-c-blobs{opacity:.5;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .cta-c-blob,#wdi-ux-page .cta-d-grain{animation:none;}
}

/* ============================================================
   WDI — Awards & Recognition · 5 variants
   Cohesive with the homepage / Industries system:
   rose accent, ink type, Figtree (Google Sans stand-in).
   A Liquid Metal Index · B Keynote · C Colour Wall
   D Mission Control (dark) · E Proof Wall
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--rose-200:#FFB3C7;--rose-100:#FFE0E9;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1280px;
}
#wdi-ux-page *{ box-sizing:border-box; }
#wdi-ux-page{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
#wdi-ux-page{ margin:0; font-family:var(--font); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
#wdi-ux-page a{ color:inherit; text-decoration:none; }
#wdi-ux-page img{ display:block; max-width:100%; }

/* ---- scroll reveal ---- */
#wdi-ux-page .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .reveal.in{ opacity:1; transform:none; }
#wdi-ux-page .reveal[data-d="1"]{ transition-delay:.06s; }
#wdi-ux-page .reveal[data-d="2"]{ transition-delay:.12s; }
#wdi-ux-page .reveal[data-d="3"]{ transition-delay:.18s; }
#wdi-ux-page .reveal[data-d="4"]{ transition-delay:.24s; }
#wdi-ux-page .reveal[data-d="5"]{ transition-delay:.30s; }
#wdi-ux-page .reveal[data-d="6"]{ transition-delay:.36s; }

/* ---- variant label strip ---- */
#wdi-ux-page .avv-vtag{ font-family:var(--font); font-size:13.5px; line-height:1.5; color:var(--ink-2); background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px clamp(20px,5vw,64px); }
#wdi-ux-page .avv-vtag b{ color:var(--ink); font-weight:600; }
#wdi-ux-page .avv-vtag .pill{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--ink); padding:3px 10px; border-radius:999px; margin-right:10px; vertical-align:middle; }
#wdi-ux-page .avv-end{ text-align:center; font-size:12.5px; letter-spacing:.04em; color:var(--faint); padding:30px; border-top:1px solid var(--line); }

/* ---- shared scaffolding ---- */
#wdi-ux-page .avv-sec{ position:relative; padding:clamp(70px,8vw,120px) 0; overflow:hidden; }
#wdi-ux-page .avv-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); position:relative; z-index:2; }
#wdi-ux-page .avv-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-600); }
#wdi-ux-page .avv-eyebrow::before{ content:""; width:7px; height:7px; border-radius:2px; background:linear-gradient(135deg,var(--rose-600),var(--rose-400)); box-shadow:0 0 10px rgba(249,47,100,.5); }

#wdi-ux-page .avv-btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font); font-size:15px; font-weight:500; letter-spacing:-.01em; border-radius:999px; padding:14px 22px; background:var(--ink); color:#fff; box-shadow:0 1px 2px rgba(11,12,14,.18),0 8px 24px rgba(11,12,14,.10); transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, box-shadow .25s; }
#wdi-ux-page .avv-btn svg{ width:17px; height:17px; transition:transform .25s; }
#wdi-ux-page .avv-btn:hover{ background:var(--rose-600); transform:translateY(-2px); box-shadow:0 2px 6px rgba(228,18,82,.30),0 14px 34px rgba(228,18,82,.26); }
#wdi-ux-page .avv-btn:hover svg{ transform:translateX(3px); }

/* logo image + monogram fallback shared */
#wdi-ux-page .aw-logo{ object-fit:contain; }
#wdi-ux-page .aw-mono{ display:grid; place-items:center; font-weight:700; letter-spacing:-.02em; color:#fff; }

/* ============================================================
   VARIANT A — LIQUID METAL INDEX
   ============================================================ */
#wdi-ux-page .av-a{ background:var(--bg-2); padding-top:clamp(56px,6vw,84px); padding-bottom:clamp(56px,6vw,84px); }
#wdi-ux-page .ava-grid{ position:relative; display:grid; grid-template-columns:1fr; gap:0; min-height:560px; }

/* the morphing sphere lives behind the list, bleeding off the left */
#wdi-ux-page .ava-orb-wrap{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
#wdi-ux-page .ava-orb{ position:absolute; top:auto; bottom:clamp(-300px,-15vw,-150px); left:clamp(-260px,-10vw,-150px); transform:none; width:clamp(520px,54vw,880px); height:clamp(520px,54vw,880px); pointer-events:auto; cursor:pointer; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .ava-orb:hover{ transform:scale(1.02); }
#wdi-ux-page .ava-orb:active{ transform:scale(.985); }
#wdi-ux-page .ava-orb svg{ width:100%; height:100%; display:block; overflow:visible; transform-origin:center; }
#wdi-ux-page .ava-orb-hint{ position:absolute; left:auto; right:13%; top:16%; bottom:auto; transform:none; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(11,12,14,.40); white-space:nowrap; pointer-events:none; transition:opacity .4s; }

/* dashed orbit rings (decorative, like OFF+BRAND) */
#wdi-ux-page .ava-rings{ position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:min(60vw,860px); height:min(60vw,860px); z-index:0; pointer-events:none; opacity:.5; }
#wdi-ux-page .ava-rings circle{ fill:none; stroke:var(--line-2); stroke-width:1; }

/* header cluster top-left */
#wdi-ux-page .ava-head{ position:relative; z-index:3; max-width:660px; }
#wdi-ux-page .ava-h{ margin:16px 0 0; font-size:clamp(32px,4.2vw,56px); line-height:1.04; font-weight:600; letter-spacing:-.038em; color:var(--ink); text-wrap:balance; }
#wdi-ux-page .ava-sub{ margin:20px 0 0; max-width:56ch; font-size:clamp(15.5px,1.3vw,18px); line-height:1.62; font-weight:300; color:var(--ink-2); }
#wdi-ux-page .ava-eyebrow-sup{ position:relative; display:inline-block; }
#wdi-ux-page .ava-eyebrow-sup sup{ font-size:.5em; font-weight:600; color:var(--rose-600); margin-left:4px; top:-1.1em; }
#wdi-ux-page .ava-kicker{ font-size:clamp(13px,1.1vw,15px); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); line-height:1.35; }
#wdi-ux-page .ava-kicker sup{ color:var(--rose-600); font-size:.62em; }

/* numbered list */
#wdi-ux-page .ava-list{ position:relative; z-index:3; margin-top:clamp(40px,5vw,72px); min-height:clamp(360px,40vw,520px); }
#wdi-ux-page .ava-row{ position:relative; padding:clamp(20px,2.4vw,32px) 0; border-top:1px solid rgba(11,12,14,.12); cursor:pointer; }
#wdi-ux-page .ava-row:last-child{ border-bottom:1px solid rgba(11,12,14,.12); }
#wdi-ux-page .ava-row-main{ display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:clamp(16px,3vw,40px); }
#wdi-ux-page .ava-num{ font-size:13px; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums; }
#wdi-ux-page .ava-name{ display:flex; align-items:center; gap:clamp(14px,1.4vw,20px); font-size:clamp(26px,3.6vw,52px); font-weight:600; letter-spacing:-.035em; line-height:1; color:var(--ink); transition:transform .5s cubic-bezier(.2,.7,.2,1), color .4s; flex-wrap:wrap; }

/* inline pink star rating, same line as the name */
#wdi-ux-page .ava-inline-rate{ display:inline-flex; align-items:center; gap:9px; }
#wdi-ux-page .ava-stars{ position:relative; display:inline-flex; line-height:0; }
#wdi-ux-page .ava-stars .s-base,#wdi-ux-page .ava-stars .s-fill{ display:inline-flex; gap:2.5px; }
#wdi-ux-page .ava-stars .s-fill{ position:absolute; inset:0; width:var(--fill,100%); overflow:hidden; }
#wdi-ux-page .ava-stars svg{ width:clamp(15px,1.3vw,19px); height:clamp(15px,1.3vw,19px); flex:none; }
#wdi-ux-page .ava-stars .s-base svg path{ fill:none; stroke:var(--rose-200); stroke-width:1.6px; }
#wdi-ux-page .ava-stars .s-fill svg path{ fill:var(--rose-500); stroke:none; }
#wdi-ux-page .ava-rate-num{ font-size:clamp(14px,1.2vw,18px); font-weight:600; letter-spacing:-.01em; color:var(--ink); }
#wdi-ux-page .ava-rate-tag{ font-size:clamp(12px,1vw,14px); font-weight:600; letter-spacing:.005em; color:var(--rose-600); background:var(--rose-soft); padding:5px 12px; border-radius:999px; white-space:nowrap; }
#wdi-ux-page .ava-name .badge{ width:clamp(38px,3.4vw,52px); height:clamp(38px,3.4vw,52px); border-radius:11px; flex:none; background:#fff; border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; box-shadow:0 1px 2px rgba(11,12,14,.06); opacity:0; transform:scale(.6) rotate(-12deg); transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .ava-name .badge img{ width:74%; height:74%; }
#wdi-ux-page .ava-name .badge .aw-mono{ width:100%; height:100%; font-size:clamp(15px,1.4vw,22px); }
#wdi-ux-page .ava-row:hover .ava-name{ transform:translateX(14px); }
#wdi-ux-page .ava-row:hover .ava-name .badge{ opacity:1; transform:scale(1) rotate(0); }
#wdi-ux-page .ava-meta{ text-align:right; }
#wdi-ux-page .ava-meta .h{ font-size:clamp(13px,1.15vw,16px); font-weight:500; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
#wdi-ux-page .ava-meta .s{ font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-top:4px; }

/* hover drop-down — 1–2 badges from this platform */
#wdi-ux-page .ava-drop{ max-height:0; opacity:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease, margin-top .45s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .ava-row:hover .ava-drop,#wdi-ux-page .ava-row:focus-within .ava-drop{ max-height:200px; opacity:1; margin-top:clamp(16px,1.8vw,22px); }
#wdi-ux-page .ava-drop-list{ display:flex; flex-wrap:wrap; gap:12px; padding-left:clamp(54px,7vw,94px); }
#wdi-ux-page .ava-chip{ display:flex; align-items:center; gap:11px; padding:10px 15px 10px 11px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 2px rgba(11,12,14,.05),0 12px 26px rgba(11,12,14,.05); transform:translateY(8px); opacity:0; transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s ease; }
#wdi-ux-page .ava-row:hover .ava-chip{ transform:none; opacity:1; }
#wdi-ux-page .ava-row:hover .ava-chip:nth-child(2){ transition-delay:.07s; }
#wdi-ux-page .ava-chip .mini{ width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; flex:none; }
#wdi-ux-page .ava-chip .mini img{ width:74%; height:74%; object-fit:contain; }
#wdi-ux-page .ava-chip .mini .aw-mono{ width:100%; height:100%; font-size:12px; }
#wdi-ux-page .ava-chip .ctxt{ display:flex; flex-direction:column; line-height:1.3; }
#wdi-ux-page .ava-chip .ctxt b{ font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
#wdi-ux-page .ava-chip .ctxt span{ font-size:11.5px; color:var(--muted); }

/* dark-mode toggle (top-right) */
#wdi-ux-page .ava-mode{ position:absolute; z-index:6; top:0; right:clamp(20px,5vw,64px); display:inline-flex; align-items:center; gap:10px; font-family:var(--font); font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--ink-2); background:transparent; border:0; padding:8px 4px; cursor:pointer; transition:color .3s; }
#wdi-ux-page .ava-mode-track{ position:relative; width:42px; height:24px; border-radius:999px; background:var(--line-2); border:1px solid var(--line); transition:background .35s, border-color .35s; }
#wdi-ux-page .ava-mode-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--ink); box-shadow:0 1px 3px rgba(11,12,14,.3); transition:left .35s cubic-bezier(.2,.7,.2,1), background .35s; }
#wdi-ux-page .ava-mode-lbl{ min-width:34px; text-align:left; }

@media (max-width:860px){
  #wdi-ux-page .ava-orb{ opacity:.30; left:-34%; bottom:-30%; width:130vw; height:130vw; }
  #wdi-ux-page .ava-row-main{ grid-template-columns:38px 1fr; }
  #wdi-ux-page .ava-meta{ display:none; }
  #wdi-ux-page .ava-drop-list{ padding-left:54px; }
}

/* ---- VARIANT A · DARK MODE ---- */
#wdi-ux-page .av-a.dark{ background:#08090A; color:#EDEEF0; }
#wdi-ux-page .av-a.dark .ava-h{ color:#fff; }
#wdi-ux-page .av-a.dark .ava-sub{ color:#9AA0A8; }
#wdi-ux-page .av-a.dark .avv-eyebrow{ color:var(--rose-300); }
#wdi-ux-page .av-a.dark .avv-eyebrow::before{ box-shadow:0 0 12px rgba(255,111,146,.7); }
#wdi-ux-page .av-a.dark .ava-rings circle{ stroke:rgba(255,255,255,.10); }
#wdi-ux-page .av-a.dark .ava-orb-hint{ color:rgba(255,255,255,.45); }
#wdi-ux-page .av-a.dark .ava-row{ border-top-color:rgba(255,255,255,.12); }
#wdi-ux-page .av-a.dark .ava-row:last-child{ border-bottom-color:rgba(255,255,255,.12); }
#wdi-ux-page .av-a.dark .ava-num{ color:#7B8088; }
#wdi-ux-page .av-a.dark .ava-name{ color:#fff; }
#wdi-ux-page .av-a.dark .ava-meta .h{ color:#EDEEF0; }
#wdi-ux-page .av-a.dark .ava-meta .s{ color:#6B7079; }
#wdi-ux-page .av-a.dark .ava-rate-num{ color:#fff; }
#wdi-ux-page .av-a.dark .ava-stars .s-base svg path{ stroke:rgba(255,111,146,.35); }
#wdi-ux-page .av-a.dark .ava-rate-tag{ color:var(--rose-300); background:rgba(249,47,100,.14); }
#wdi-ux-page .av-a.dark .ava-name .badge{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:none; }
#wdi-ux-page .av-a.dark .ava-chip{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); box-shadow:0 12px 26px rgba(0,0,0,.4); }
#wdi-ux-page .av-a.dark .ava-chip .mini{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
#wdi-ux-page .av-a.dark .ava-chip .ctxt b{ color:#EDEEF0; }
#wdi-ux-page .av-a.dark .ava-chip .ctxt span{ color:#7B8088; }
/* toggle in the ON (dark) state */
#wdi-ux-page .av-a.dark .ava-mode{ color:#9AA0A8; }
#wdi-ux-page .av-a.dark .ava-mode-track{ background:rgba(255,111,146,.30); border-color:rgba(255,111,146,.45); }
#wdi-ux-page .av-a.dark .ava-mode-thumb{ left:22px; background:var(--rose-300); }
@media (max-width:560px){
  #wdi-ux-page .ava-name{ font-size:clamp(24px,8vw,34px); }
  #wdi-ux-page .ava-inline-rate{ width:100%; }
}

/* ============================================================
   VARIANT B — KEYNOTE (Apple single-focus)
   ============================================================ */
#wdi-ux-page .av-b{ background:#fff; text-align:center; }
#wdi-ux-page .avb-head{ text-align:center; max-width:760px; margin:0 auto; }
#wdi-ux-page .avb-h{ margin:16px 0 0; font-size:clamp(32px,4.4vw,60px); line-height:1.04; font-weight:600; letter-spacing:-.035em; color:var(--ink); text-wrap:balance; }
#wdi-ux-page .avb-sub{ margin:18px auto 0; max-width:54ch; font-size:clamp(15.5px,1.3vw,18px); line-height:1.6; font-weight:300; color:var(--ink-2); }

#wdi-ux-page .avb-stage{ position:relative; margin:clamp(46px,6vw,84px) auto 0; height:clamp(300px,34vw,440px); display:grid; place-items:center; }
#wdi-ux-page .avb-slide{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; opacity:0; transform:scale(.94); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
#wdi-ux-page .avb-slide.on{ opacity:1; transform:scale(1); pointer-events:auto; }
#wdi-ux-page .avb-badge{ width:clamp(108px,12vw,156px); height:clamp(108px,12vw,156px); border-radius:28px; display:grid; place-items:center; background:#fff; box-shadow:0 2px 8px rgba(11,12,14,.06),0 30px 70px rgba(11,12,14,.12); overflow:hidden; }
#wdi-ux-page .avb-badge img{ width:64%; height:64%; object-fit:contain; }
#wdi-ux-page .avb-badge .aw-mono{ width:100%; height:100%; font-size:clamp(34px,4vw,56px); }
#wdi-ux-page .avb-award{ font-size:clamp(26px,3vw,40px); font-weight:600; letter-spacing:-.03em; color:var(--ink); }
#wdi-ux-page .avb-detail{ font-size:clamp(15px,1.3vw,18px); font-weight:300; color:var(--ink-2); max-width:42ch; }
#wdi-ux-page .avb-year{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-600); font-weight:600; }

/* dots + progress */
#wdi-ux-page .avb-dots{ display:flex; gap:10px; justify-content:center; margin-top:clamp(34px,4vw,52px); }
#wdi-ux-page .avb-dot{ width:9px; height:9px; border-radius:50%; background:var(--line-2); border:0; padding:0; cursor:pointer; transition:transform .3s, background .3s, width .35s, border-radius .35s; }
#wdi-ux-page .avb-dot.on{ width:30px; border-radius:5px; background:var(--ink); }
#wdi-ux-page .avb-counter{ margin-top:20px; font-size:13px; letter-spacing:.06em; color:var(--faint); font-variant-numeric:tabular-nums; }
#wdi-ux-page .avb-counter b{ color:var(--ink); font-weight:600; }

/* ============================================================
   VARIANT C — COLOUR WALL (Google)
   ============================================================ */
#wdi-ux-page .av-c{ background:#fff; }
#wdi-ux-page .avc-head{ max-width:920px; }
#wdi-ux-page .avc-h{ margin:16px 0 0; font-size:clamp(30px,4vw,52px); line-height:1.05; font-weight:600; letter-spacing:-.035em; color:var(--ink); text-wrap:balance; }
#wdi-ux-page .avc-grid{ margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.6vw,22px); }
#wdi-ux-page .avc-tile{ position:relative; border-radius:24px; padding:clamp(22px,2.4vw,32px); min-height:clamp(190px,18vw,260px); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fff; isolation:isolate; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
#wdi-ux-page .avc-tile::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 60%); z-index:-1; }
#wdi-ux-page .avc-tile:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(11,12,14,.18); }
#wdi-ux-page .avc-tile .badge{ width:clamp(48px,4vw,62px); height:clamp(48px,4vw,62px); border-radius:14px; background:#fff; display:grid; place-items:center; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.14); }
#wdi-ux-page .avc-tile .badge img{ width:70%; height:70%; object-fit:contain; }
#wdi-ux-page .avc-tile .badge .aw-mono{ width:100%; height:100%; font-size:22px; color:#0B0C0E; }
#wdi-ux-page .avc-tile .tname{ font-size:clamp(20px,1.9vw,27px); font-weight:600; letter-spacing:-.02em; }
#wdi-ux-page .avc-tile .thonor{ font-size:clamp(13px,1.1vw,15.5px); font-weight:400; opacity:.92; margin-top:4px; }
#wdi-ux-page .avc-tile .tfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
#wdi-ux-page .avc-tile .tyear{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.78; }
#wdi-ux-page .avc-tile .trate{ display:inline-flex; align-items:baseline; gap:4px; font-weight:700; }
#wdi-ux-page .avc-tile .trate b{ font-size:clamp(20px,1.8vw,26px); letter-spacing:-.02em; }
#wdi-ux-page .avc-tile .trate span{ font-size:12px; opacity:.7; }
/* deliberate Google-ish irregular spans */
#wdi-ux-page .avc-tile.s-lg{ grid-column:span 6; }
#wdi-ux-page .avc-tile.s-md{ grid-column:span 4; }
#wdi-ux-page .avc-tile.s-sm{ grid-column:span 3; }
#wdi-ux-page .avc-tile.s-wide{ grid-column:span 5; }
@media (max-width:980px){ #wdi-ux-page .avc-tile{ grid-column:span 6 !important; } }
@media (max-width:560px){ #wdi-ux-page .avc-tile{ grid-column:span 12 !important; } }

/* ============================================================
   VARIANT D — MISSION CONTROL (SpaceX dark)
   ============================================================ */
#wdi-ux-page .av-d{ background:#070809; color:#EDEEF0; }
#wdi-ux-page .av-d .avv-eyebrow{ color:#FF6F92; }
#wdi-ux-page .av-d .avv-eyebrow::before{ box-shadow:0 0 12px rgba(255,111,146,.7); }
#wdi-ux-page .avd-grain{ position:absolute; inset:0; z-index:0; opacity:.5; background:
  radial-gradient(900px 480px at 78% -8%, rgba(249,47,100,.10), transparent 60%),
  radial-gradient(700px 420px at 4% 108%, rgba(122,0,255,.10), transparent 60%); pointer-events:none; }
#wdi-ux-page .avd-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
#wdi-ux-page .avd-h{ margin:14px 0 0; font-size:clamp(28px,3.4vw,46px); line-height:1.05; font-weight:600; letter-spacing:-.03em; color:#fff; max-width:18ch; }
#wdi-ux-page .avd-meta{ font-family:"SFMono-Regular",ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.04em; color:#7B8088; text-align:right; line-height:1.7; }
#wdi-ux-page .avd-meta b{ color:#fff; font-weight:600; }

#wdi-ux-page .avd-table{ margin-top:clamp(38px,4vw,56px); border-top:1px solid rgba(255,255,255,.12); }
#wdi-ux-page .avd-row{ display:grid; grid-template-columns:60px 64px 1fr 1.1fr 110px 84px; align-items:center; gap:clamp(12px,1.8vw,28px); padding:clamp(16px,1.8vw,24px) 6px; border-bottom:1px solid rgba(255,255,255,.09); position:relative; transition:background .35s; }
#wdi-ux-page .avd-row:hover{ background:rgba(255,255,255,.035); }
#wdi-ux-page .avd-row .idx{ font-family:ui-monospace,monospace; font-size:12px; color:#5A5F67; }
#wdi-ux-page .avd-row .badge{ width:46px; height:46px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); display:grid; place-items:center; overflow:hidden; }
#wdi-ux-page .avd-row .badge img{ width:72%; height:72%; object-fit:contain; }
#wdi-ux-page .avd-row .badge .aw-mono{ width:100%; height:100%; font-size:16px; }
#wdi-ux-page .avd-row .nm{ font-size:clamp(18px,1.7vw,24px); font-weight:600; letter-spacing:-.02em; color:#fff; }
#wdi-ux-page .avd-row .dt{ font-size:13.5px; color:#9AA0A8; font-weight:300; }
#wdi-ux-page .avd-row .ct{ font-family:ui-monospace,monospace; font-size:12.5px; letter-spacing:.02em; color:#7B8088; }
#wdi-ux-page .avd-row .rt{ text-align:right; font-variant-numeric:tabular-nums; }
#wdi-ux-page .avd-row .rt b{ font-size:clamp(18px,1.6vw,22px); font-weight:600; color:#fff; }
#wdi-ux-page .avd-row .rt span{ font-size:11px; color:#7B8088; display:block; letter-spacing:.1em; text-transform:uppercase; margin-top:2px; }
#wdi-ux-page .avd-row .bar{ position:absolute; left:0; bottom:-1px; height:2px; width:0; background:linear-gradient(90deg,var(--rose-500),var(--rose-300)); transition:width .6s cubic-bezier(.2,.7,.2,1); }
#wdi-ux-page .avd-row:hover .bar{ width:100%; }
@media (max-width:860px){ #wdi-ux-page .avd-row{ grid-template-columns:40px 46px 1fr 80px; } #wdi-ux-page .avd-row .dt,#wdi-ux-page .avd-row .ct{ display:none; } }

#wdi-ux-page .avd-foot{ margin-top:clamp(34px,4vw,48px); display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
#wdi-ux-page .av-d .avv-btn{ background:#fff; color:#0B0C0E; box-shadow:none; }
#wdi-ux-page .av-d .avv-btn:hover{ background:var(--rose-500); color:#fff; }

/* ============================================================
   VARIANT E — PROOF WALL (Uxcel)
   ============================================================ */
#wdi-ux-page .av-e{ background:#fff; }
#wdi-ux-page .ave-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(36px,5vw,80px); align-items:start; }
#wdi-ux-page .ave-h{ margin:16px 0 0; font-size:clamp(34px,4.4vw,56px); line-height:1.02; font-weight:700; letter-spacing:-.04em; color:var(--ink); text-wrap:balance; }
#wdi-ux-page .ave-sub{ margin:20px 0 0; font-size:clamp(15.5px,1.3vw,18px); line-height:1.6; font-weight:300; color:var(--ink-2); max-width:40ch; }
#wdi-ux-page .ave-seal{ margin-top:34px; display:inline-flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid var(--line); border-radius:16px; background:var(--bg-2); }
#wdi-ux-page .ave-seal .ring{ width:46px; height:46px; border-radius:50%; border:1.5px dashed var(--rose-300); display:grid; place-items:center; color:var(--rose-600); font-weight:700; font-size:13px; }
#wdi-ux-page .ave-seal .t b{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
#wdi-ux-page .ave-seal .t span{ font-size:12.5px; color:var(--muted); }

#wdi-ux-page .ave-cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,28px); }
#wdi-ux-page .ave-card{ padding:clamp(20px,2vw,28px) 0; border-top:1px solid var(--line); }
#wdi-ux-page .ave-card .top{ display:flex; align-items:center; gap:10px; }
#wdi-ux-page .ave-card .top .badge{ width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; }
#wdi-ux-page .ave-card .top .badge img{ width:74%; height:74%; object-fit:contain; }
#wdi-ux-page .ave-card .top .badge .aw-mono{ width:100%; height:100%; font-size:12px; }
#wdi-ux-page .ave-card .top .pn{ font-size:14px; font-weight:600; color:var(--ink); }
#wdi-ux-page .ave-card .big{ margin:14px 0 4px; font-size:clamp(38px,4.4vw,58px); font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink); }
#wdi-ux-page .ave-card .stars{ display:inline-flex; gap:3px; color:var(--rose-500); }
#wdi-ux-page .ave-card .stars svg{ width:16px; height:16px; }
#wdi-ux-page .ave-card .cap{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--muted); }
@media (max-width:860px){ #wdi-ux-page .ave-grid{ grid-template-columns:1fr; } #wdi-ux-page .ave-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ #wdi-ux-page .ave-cards{ grid-template-columns:1fr; } }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  #wdi-ux-page *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  #wdi-ux-page .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   WDI — Portfolio Page (View Our Work)
   header · technology-company band (moving faded text) · projects
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--violet:#7A00FF;--violet-2:#A24BFF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--page:#F5F3F0;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* ============================================================
   1 · HEADER
   ============================================================ */
#wdi-ux-page .pp-hero{position:relative;padding:120px 0 90px;text-align:center;overflow:hidden;background:var(--bg);}
#wdi-ux-page .pp-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .pp-hero .eyebrow::before,#wdi-ux-page .pp-hero .eyebrow::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--rose-400));}
#wdi-ux-page .pp-hero .eyebrow::after{background:linear-gradient(90deg,var(--rose-400),transparent);}
#wdi-ux-page .pp-hero h1{margin-top:26px;font-size:clamp(52px,10vw,150px);font-weight:600;letter-spacing:-0.05em;line-height:.9;color:var(--ink);}
#wdi-ux-page .pp-hero h1 .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .pp-hero .sub{margin:30px auto 0;max-width:60ch;font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.55;color:var(--ink-2);}
#wdi-ux-page .pp-hero .meta{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;}
#wdi-ux-page .pp-hero .meta .stat b{font-size:30px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
#wdi-ux-page .pp-hero .meta .stat span{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--muted);}
#wdi-ux-page .pp-hero .meta .div{width:1px;height:34px;background:var(--line-2);}
#wdi-ux-page .pp-scrollcue{margin-top:46px;display:inline-flex;flex-direction:column;align-items:center;gap:8px;color:var(--faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
#wdi-ux-page .pp-scrollcue .mouse{width:22px;height:34px;border:1.5px solid var(--line-2);border-radius:12px;position:relative;}
#wdi-ux-page .pp-scrollcue .mouse::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;background:var(--rose-500);transform:translateX(-50%);animation:ppMouse 1.8s ease-in-out infinite;}
@keyframes ppMouse{0%{opacity:0;transform:translate(-50%,0);}40%{opacity:1;}100%{opacity:0;transform:translate(-50%,10px);}}

/* ============================================================
   2 · TECHNOLOGY-COMPANY BAND  (moving faded backdrop text)
   ============================================================ */
#wdi-ux-page .pp-band{position:relative;padding:130px 0;overflow:hidden;background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;}
#wdi-ux-page .pp-band-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;white-space:nowrap;
  font-size:clamp(90px,16vw,260px);font-weight:700;letter-spacing:-0.04em;line-height:1;color:rgba(255,255,255,.045);
  -webkit-text-stroke:1px rgba(255,255,255,.04);will-change:transform;}
#wdi-ux-page .pp-band-track.r1{animation:ppMarqueeL 34s linear infinite;top:34%;}
#wdi-ux-page .pp-band-track.r2{animation:ppMarqueeR 40s linear infinite;top:68%;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);}
@keyframes ppMarqueeL{from{transform:translate(0,-50%);}to{transform:translate(-50%,-50%);}}
@keyframes ppMarqueeR{from{transform:translate(-50%,-50%);}to{transform:translate(0,-50%);}}
#wdi-ux-page .pp-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 60% at 20% 30%,rgba(249,47,100,.16),transparent 60%),radial-gradient(40% 60% at 82% 72%,rgba(122,0,255,.16),transparent 60%);
  filter:blur(20px);animation:ppBandGlow 16s ease-in-out infinite alternate;}
@keyframes ppBandGlow{from{transform:translateX(-3%);}to{transform:translateX(3%);}}
#wdi-ux-page .pp-band-in{position:relative;z-index:2;text-align:center;max-width:1000px;margin:0 auto;}
#wdi-ux-page .pp-band .tag{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page .pp-band .tag .lvdot{width:7px;height:7px;border-radius:50%;background:var(--rose-400);box-shadow:0 0 0 0 rgba(249,47,100,.6);animation:ppPulse 2.4s ease-out infinite;}
@keyframes ppPulse{0%{box-shadow:0 0 0 0 rgba(249,47,100,.5);}70%{box-shadow:0 0 0 8px rgba(249,47,100,0);}100%{box-shadow:0 0 0 0 rgba(249,47,100,0);}}
#wdi-ux-page .pp-band h2{margin-top:24px;font-size:clamp(30px,4.4vw,60px);font-weight:500;letter-spacing:-0.035em;line-height:1.04;color:#fff;text-wrap:balance;}
#wdi-ux-page .pp-band h2 em{font-style:normal;background:linear-gradient(110deg,var(--rose-400),var(--violet-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .pp-band p{margin:24px auto 0;max-width:62ch;font-size:clamp(16px,1.4vw,18.5px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.72);}

/* ============================================================
   3 · OUR PROJECTS  (SpaceX cinematic full-bleed)
   ============================================================ */
#wdi-ux-page .pp-projects{position:relative;padding:96px 0 0;background:var(--bg);}
#wdi-ux-page .pp-projects-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px;}
#wdi-ux-page .pp-projects-head .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .pp-projects-head .eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .pp-projects-head h2{margin-top:16px;font-size:clamp(30px,3.6vw,48px);font-weight:600;letter-spacing:-0.035em;line-height:1;color:var(--ink);}
#wdi-ux-page .pp-projects-head p{max-width:42ch;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--muted);}

/* industry capsules */
#wdi-ux-page .pp-caps{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
#wdi-ux-page .pp-cap{font-family:var(--font);font-size:13.5px;font-weight:500;letter-spacing:-0.01em;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:9px 17px;cursor:pointer;transition:color .25s,background .25s,border-color .25s,transform .25s;}
#wdi-ux-page .pp-cap:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-2px);}
#wdi-ux-page .pp-cap.active{color:#fff;background:var(--ink);border-color:var(--ink);}
#wdi-ux-page .pp-cap .n{font-size:11px;opacity:.55;margin-left:6px;font-feature-settings:"tnum" 1;}

/* full-bleed cinematic panels */
#wdi-ux-page .pp-stack{}
#wdi-ux-page .pp-card{position:relative;width:100vw;left:50%;transform:translateX(-50%);height:100vh;min-height:100vh;max-height:none;overflow:hidden;background:#08090c;border-top:1px solid rgba(255,255,255,.06);scroll-snap-align:start;scroll-snap-stop:always;}
#wdi-ux-page .pp-card[hidden]{display:none;}
/* real media (image / video) fills the frame with a slow cinematic zoom */
#wdi-ux-page .pp-media{position:absolute;inset:0;z-index:0;transform:translate(calc(var(--px,0)*-13px),calc(var(--py,0)*-11px));transition:transform .35s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pp-media img,#wdi-ux-page .pp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pp-card.in .pp-media img,#wdi-ux-page .pp-card.in .pp-media video{animation:ppKen 16s ease-in-out infinite alternate;}
@keyframes ppKen{from{transform:scale(1.04);}to{transform:scale(1.13) translate(-1%,1%);}}
/* hue + WDI-pink cinematic scrim */
#wdi-ux-page .pp-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
   linear-gradient(to bottom,rgba(8,9,12,.78) 0%,rgba(8,9,12,.56) 30%,rgba(8,9,12,.62) 55%,rgba(8,9,12,.9) 84%,rgba(8,9,12,.98) 100%),
   radial-gradient(75% 120% at 12% 88%,color-mix(in srgb,var(--hue,#39E07B) 30%,transparent),transparent 60%),
   radial-gradient(60% 120% at 100% 0%,rgba(249,47,100,.26),transparent 58%);}
#wdi-ux-page .pp-glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(440px 440px at var(--cx,50%) var(--cy,28%),color-mix(in srgb,var(--hue,#39E07B) 26%,transparent),transparent 62%);}
#wdi-ux-page .pp-card.hot .pp-glow{opacity:1;}

/* corner index + vertical industry */
#wdi-ux-page .pp-topbar{position:absolute;left:0;right:0;top:36px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin:0 auto;padding:0 40px;left:50%;transform:translateX(-50%);}
#wdi-ux-page .pp-index{font-size:13px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.6);font-feature-settings:"tnum" 1;display:inline-block;margin-bottom:48px;}
#wdi-ux-page .pp-index b{color:#fff;}
#wdi-ux-page .pp-x{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);}
#wdi-ux-page .pp-x .cross{color:var(--hue,#39E07B);font-weight:700;}
#wdi-ux-page .pp-x b{color:#fff;}
#wdi-ux-page .pp-vind{position:absolute;right:40px;top:0;bottom:0;z-index:3;display:flex;align-items:center;pointer-events:none;}
#wdi-ux-page .pp-vind span{writing-mode:vertical-rl;text-orientation:mixed;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);}
#wdi-ux-page .pp-vind span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hue,#39E07B);margin-bottom:10px;box-shadow:0 0 10px var(--hue,#39E07B);}

/* content anchored bottom-left (SpaceX style) */
#wdi-ux-page .pp-content{position:absolute;left:0;right:0;bottom:0;z-index:3;}
#wdi-ux-page .pp-content-in{max-width:var(--maxw);margin:0 auto;padding:0 40px 70px;}
#wdi-ux-page .pp-logo{display:grid;place-items:start;margin-bottom:24px;
  opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pp-logo .lg{font-weight:800;font-size:18px;letter-spacing:-0.02em;color:#fff;}
#wdi-ux-page .pp-logo img{height:52px;width:auto;max-width:240px;object-fit:contain;display:block;}
#wdi-ux-page .pp-logo .lg em{font-style:normal;color:color-mix(in srgb,var(--hue,#39E07B) 80%,#0B0C0E);}
#wdi-ux-page .pp-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(22px);transition:opacity .7s ease .04s,transform .8s cubic-bezier(.2,.7,.2,1) .04s;}
#wdi-ux-page .pp-eyebrow .n{color:var(--hue,#39E07B);}
#wdi-ux-page .pp-eyebrow .bar{width:30px;height:1px;background:rgba(255,255,255,.4);}
#wdi-ux-page .pp-name{margin-top:18px;font-size:clamp(46px,7vw,96px);font-weight:600;letter-spacing:-0.045em;line-height:.92;color:#fff;position:relative;
  opacity:0;transform:translateY(30px);transition:opacity .8s ease .1s,transform .9s cubic-bezier(.2,.7,.2,1) .1s;}
#wdi-ux-page .pp-name-tx{display:inline-block;
  background:linear-gradient(100deg,#fff 32%,color-mix(in srgb,var(--hue,#39E07B) 92%,#fff) 50%,#fff 68%);
  background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
#wdi-ux-page .pp-card.in .pp-name-tx{animation:ppSheen 1.5s cubic-bezier(.4,0,.2,1) .55s 1 forwards;}
#wdi-ux-page .pp-card.hot .pp-name-tx{animation:ppSheen 1.1s cubic-bezier(.4,0,.2,1) 0s 1 forwards;}
@keyframes ppSheen{from{background-position:100% 0;}to{background-position:0 0;}}
#wdi-ux-page .pp-tagline{margin-top:14px;font-size:clamp(21px,2.3vw,30px);font-weight:400;line-height:1.32;color:#fff;max-width:46ch;letter-spacing:-0.02em;
  opacity:0;transform:translateY(24px);transition:opacity .8s ease .18s,transform .9s cubic-bezier(.2,.7,.2,1) .18s;}
#wdi-ux-page .pp-desc{margin-top:16px;font-size:clamp(16px,1.6vw,20px);font-weight:300;line-height:1.5;color:rgba(255,255,255,.78);max-width:52ch;
  opacity:0;transform:translateY(22px);transition:opacity .8s ease .28s,transform .9s cubic-bezier(.2,.7,.2,1) .28s;}
#wdi-ux-page .pp-row{margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;max-width:540px;
  opacity:0;transform:translateY(20px);transition:opacity .8s ease .3s,transform .9s cubic-bezier(.2,.7,.2,1) .3s;}
#wdi-ux-page .pp-tags{display:flex;flex-wrap:wrap;gap:9px;}
#wdi-ux-page .pp-tag{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 13px;backdrop-filter:blur(6px);}
#wdi-ux-page .pp-tag.lead{background:var(--hue,#39E07B);color:#0B0C0E;border-color:var(--hue,#39E07B);}
#wdi-ux-page .pp-explore{display:inline-flex;align-items:center;gap:12px;font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;padding:16px 26px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);transition:background .3s,border-color .3s,transform .3s,gap .3s,color .3s;}
#wdi-ux-page .pp-explore svg{width:16px;height:16px;transition:transform .3s;}
#wdi-ux-page .pp-explore:hover{background:var(--hue,#39E07B);border-color:var(--hue,#39E07B);color:#0B0C0E;transform:translateY(-2px);gap:16px;}
#wdi-ux-page .pp-explore:hover svg{transform:translateX(3px);}
#wdi-ux-page .pp-card.in .pp-logo,#wdi-ux-page .pp-card.in .pp-eyebrow,#wdi-ux-page .pp-card.in .pp-name,#wdi-ux-page .pp-card.in .pp-tagline,#wdi-ux-page .pp-card.in .pp-desc,#wdi-ux-page .pp-card.in .pp-row{opacity:1;transform:none;}

/* refined header: eyebrow */
#wdi-ux-page .pp-eyebrow{gap:13px;font-size:11.5px;letter-spacing:.28em;color:rgba(255,255,255,.82);}
#wdi-ux-page .pp-eyebrow .n{color:var(--hue,#39E07B);font-weight:700;}
#wdi-ux-page .pp-eyebrow .bar{width:38px;background:linear-gradient(90deg,var(--hue,#39E07B),transparent);height:1.5px;}

/* ---- key impact zone (TOP-RIGHT, corporate) ---- */
#wdi-ux-page .pp-keystat{position:absolute;left:50%;transform:translateX(-50%);top:148px;z-index:3;width:100%;max-width:var(--maxw);padding:0 40px;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
#wdi-ux-page .pp-keystat-label{display:inline-flex;flex-direction:row-reverse;align-items:center;gap:9px;font-size:9.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.44);
  opacity:0;transform:translateY(-12px);transition:opacity .7s ease .1s,transform .8s cubic-bezier(.2,.7,.2,1) .1s;}
#wdi-ux-page .pp-keystat-label::before{content:"";width:16px;height:1px;background:color-mix(in srgb,var(--hue,#39E07B) 75%,#fff);opacity:.7;}
#wdi-ux-page .pp-keystat-h{margin-top:15px;max-width:18ch;font-size:clamp(17px,1.75vw,25px);font-weight:300;line-height:1.34;letter-spacing:-0.012em;color:rgba(255,255,255,.72);text-wrap:balance;
  opacity:0;transform:translateY(-14px);transition:opacity .8s ease .16s,transform .9s cubic-bezier(.2,.7,.2,1) .16s;}
#wdi-ux-page .pp-mcaps{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px 0;justify-content:flex-end;max-width:34ch;
  opacity:0;transform:translateY(-10px);transition:opacity .8s ease .24s,transform .9s cubic-bezier(.2,.7,.2,1) .24s;}
#wdi-ux-page .pp-mcap{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.46);background:none;border:none;border-radius:0;padding:0;line-height:1;}
#wdi-ux-page .pp-mcap:not(:first-child){margin-left:11px;}
#wdi-ux-page .pp-mcap:not(:first-child)::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;margin-right:11px;vertical-align:middle;}
#wdi-ux-page .pp-card.in .pp-keystat-label,#wdi-ux-page .pp-card.in .pp-keystat-h,#wdi-ux-page .pp-card.in .pp-mcaps{opacity:1;transform:none;}

/* ---- review badges (BOTTOM-RIGHT, real award badge + short quote) ---- */
#wdi-ux-page .pp-reviews{position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:3;width:100%;max-width:var(--maxw);padding:0 40px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:11px;pointer-events:none;}
#wdi-ux-page .pp-rev{display:inline-flex;align-items:center;gap:14px;width:max-content;max-width:330px;background:rgba(16,17,22,.55);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 19px 12px 12px;backdrop-filter:blur(18px);box-shadow:0 16px 40px rgba(0,0,0,.36);
  opacity:0;transform:translateY(22px) scale(.97);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pp-rev:nth-child(2){transition-delay:.1s;}
#wdi-ux-page .pp-card.in .pp-rev{opacity:1;transform:none;}
#wdi-ux-page .pp-rev-badge{height:54px;width:auto;flex:none;display:block;border-radius:8px;background:#fff;}
#wdi-ux-page .pp-rev-google .pp-rev-mk{width:48px;height:48px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 2px 10px rgba(0,0,0,.2);}
#wdi-ux-page .pp-rev-google .pp-rev-mk svg{width:27px;height:27px;display:block;}
#wdi-ux-page .pp-rev-in{display:flex;flex-direction:column;gap:6px;line-height:1;}
#wdi-ux-page .pp-rev-q{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-0.015em;line-height:1.18;}
#wdi-ux-page .pp-rev-meta{display:inline-flex;align-items:center;gap:9px;}
#wdi-ux-page .pp-rev .st{display:inline-flex;gap:1.5px;color:#FFC53D;}
#wdi-ux-page .pp-rev .st svg{width:12px;height:12px;}
#wdi-ux-page .pp-rev-meta i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);}

/* ============================================================
   CTA card (WDI homepage style — light, animated)
   ============================================================ */
#wdi-ux-page .pp-cta{position:relative;width:100vw;left:50%;transform:translateX(-50%);min-height:100vh;display:grid;place-items:center;overflow:hidden;
  background:var(--bg);scroll-snap-align:start;scroll-snap-stop:always;text-align:center;}
#wdi-ux-page .pp-cta-aura{position:absolute;width:780px;height:780px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(249,47,100,.16),rgba(122,0,255,.13),rgba(0,200,255,.07),rgba(255,179,0,.1),rgba(249,47,100,.16));
  filter:blur(90px);opacity:.6;animation:ppCtaSpin 26s linear infinite;}
@keyframes ppCtaSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
#wdi-ux-page .pp-cta-dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(11,12,14,.07) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);}
#wdi-ux-page .pp-cta-in{position:relative;z-index:2;max-width:760px;padding:0 40px;}
#wdi-ux-page .pp-cta-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);
  opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pp-cta-eyebrow .lvdot{width:7px;height:7px;border-radius:50%;background:var(--rose-500);box-shadow:0 0 0 0 rgba(249,47,100,.5);animation:ppCtaPulse 2.4s ease-out infinite;}
@keyframes ppCtaPulse{0%{box-shadow:0 0 0 0 rgba(249,47,100,.5);}70%{box-shadow:0 0 0 8px rgba(249,47,100,0);}100%{box-shadow:0 0 0 0 rgba(249,47,100,0);}}
#wdi-ux-page .pp-cta-h{margin-top:24px;font-size:clamp(40px,5.6vw,76px);font-weight:600;letter-spacing:-0.04em;line-height:.98;color:var(--ink);text-wrap:balance;
  opacity:0;transform:translateY(28px);transition:opacity .8s ease .08s,transform .9s cubic-bezier(.2,.7,.2,1) .08s;}
#wdi-ux-page .pp-cta-h em{font-style:normal;background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .pp-cta-p{margin:24px auto 0;max-width:56ch;font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.55;color:var(--ink-2);
  opacity:0;transform:translateY(24px);transition:opacity .8s ease .16s,transform .9s cubic-bezier(.2,.7,.2,1) .16s;}
#wdi-ux-page .pp-cta-actions{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;transform:translateY(22px);transition:opacity .8s ease .24s,transform .9s cubic-bezier(.2,.7,.2,1) .24s;}
#wdi-ux-page .pp-cta-btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--font);font-size:15px;font-weight:500;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:15px 16px 15px 26px;text-decoration:none;transition:transform .25s,background .25s,box-shadow .3s;}
#wdi-ux-page .pp-cta-btn .ar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;transition:background .3s,transform .3s;}
#wdi-ux-page .pp-cta-btn .ar svg{width:16px;height:16px;}
#wdi-ux-page .pp-cta-btn:hover{background:var(--rose-600);border-color:var(--rose-600);transform:translateY(-2px);box-shadow:0 16px 36px rgba(228,18,82,.3);}
#wdi-ux-page .pp-cta-btn:hover .ar{transform:translateX(2px);}
#wdi-ux-page .pp-cta-ghost{display:inline-flex;align-items:center;font-family:var(--font);font-size:15px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:15px 24px;text-decoration:none;transition:border-color .25s,transform .25s;}
#wdi-ux-page .pp-cta-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
#wdi-ux-page .pp-cta-stats{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;
  opacity:0;transform:translateY(20px);transition:opacity .8s ease .32s,transform .9s cubic-bezier(.2,.7,.2,1) .32s;}
#wdi-ux-page .pp-cta-stats .s b{font-size:28px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
#wdi-ux-page .pp-cta-stats .s span{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--muted);}
#wdi-ux-page .pp-cta-stats .d{width:1px;height:32px;background:var(--line-2);}
#wdi-ux-page .pp-cta.in .pp-cta-eyebrow,#wdi-ux-page .pp-cta.in .pp-cta-h,#wdi-ux-page .pp-cta.in .pp-cta-p,#wdi-ux-page .pp-cta.in .pp-cta-actions,#wdi-ux-page .pp-cta.in .pp-cta-stats{opacity:1;transform:none;}
@media(max-width:760px){#wdi-ux-page .pp-cta{min-height:auto;padding:90px 0;}#wdi-ux-page .pp-cta-stats{gap:18px;}#wdi-ux-page .pp-cta-stats .d{display:none;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .pp-cta-aura{animation:none;}#wdi-ux-page .pp-cta .pp-cta-in *{opacity:1!important;transform:none!important;}}

/* foreground collateral (device mockup) — vertically centred on the right */
#wdi-ux-page .pp-device{position:absolute;right:6%;top:32%;z-index:2;height:58%;width:auto;max-width:42%;object-fit:contain;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));opacity:0;transform:translateY(calc(-50% + 40px)) scale(.97);
  transition:opacity .9s ease .15s,transform 1s cubic-bezier(.2,.7,.2,1) .15s;pointer-events:none;}
#wdi-ux-page .pp-card.in .pp-device{opacity:1;transform:translateY(-50%);}
/* tablet / small-laptop band: keep corner layout but shrink columns so they never meet */
@media(min-width:761px) and (max-width:1080px){
  #wdi-ux-page .pp-row{max-width:46%;}
  #wdi-ux-page .pp-rev{max-width:240px;padding:10px 15px 10px 10px;gap:11px;}
  #wdi-ux-page .pp-rev-badge{height:46px;}
  #wdi-ux-page .pp-rev-google .pp-rev-mk{width:42px;height:42px;}
  #wdi-ux-page .pp-rev-q{font-size:13.5px;}
  #wdi-ux-page .pp-keystat-h{font-size:clamp(16px,1.9vw,20px);max-width:16ch;}
}
@media(max-width:760px){#wdi-ux-page .pp-device{position:relative;right:auto;top:auto;height:auto;max-width:74%;margin:24px auto -10px;display:block;transform:none;}#wdi-ux-page .pp-card.in .pp-device{transform:none;}}

@media(max-width:760px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .pp-hero{padding:80px 0 60px;}
  #wdi-ux-page .pp-band{padding:90px 0;}
  /* Sticky overlap retained via #work rules below — do not flatten cards here */
  #wdi-ux-page .pp-vind,#wdi-ux-page .pp-index{display:none;}
  #wdi-ux-page .pp-name{opacity:1;transform:none;}
  #wdi-ux-page .pp-keystat{top:62px;left:0;transform:none;padding:0 22px;align-items:flex-end;text-align:right;}
  #wdi-ux-page .pp-keystat-h{font-size:19px;max-width:16ch;}
  #wdi-ux-page .pp-mcaps{display:none;}
  #wdi-ux-page .pp-rev{max-width:none;width:100%;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .pp-band-track,#wdi-ux-page .pp-band::before{animation:none;}
  #wdi-ux-page .pp-media img,#wdi-ux-page .pp-media video{animation:none!important;transform:none;}
  #wdi-ux-page .pp-card .pp-content *{opacity:1!important;transform:none!important;}
}

/* ============================================================
   awards rolling strip
   ============================================================ */
#wdi-ux-page .pp-awards{position:relative;background:var(--bg);border-top:1px solid var(--line);padding:96px 0 100px;overflow:hidden;}
#wdi-ux-page .pp-awards-head{text-align:center;max-width:720px;margin:0 auto 52px;}
#wdi-ux-page .pp-awards-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .pp-awards-h{margin-top:18px;font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .pp-awards-sub{margin-top:18px;font-size:clamp(15px,1.3vw,17px);font-weight:300;line-height:1.55;color:var(--muted);}
#wdi-ux-page .pp-awards-strip{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
#wdi-ux-page .pp-awards-rail{display:flex;align-items:center;gap:64px;width:max-content;animation:ppAwardRoll 42s linear infinite;}
#wdi-ux-page .pp-awards-strip:hover .pp-awards-rail{animation-play-state:paused;}
@keyframes ppAwardRoll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
#wdi-ux-page .pp-award{flex:none;display:flex;align-items:center;gap:13px;color:#AEB3BB;transition:color .35s ease,filter .35s ease,transform .35s ease;}
#wdi-ux-page .pp-award .medal{width:26px;height:26px;flex:none;color:inherit;}
#wdi-ux-page .pp-award .medal svg{width:100%;height:100%;}
#wdi-ux-page .pp-award .by{font-size:24px;font-weight:600;letter-spacing:-0.02em;white-space:nowrap;}
#wdi-ux-page .pp-award .rt{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:inherit;opacity:.8;}
#wdi-ux-page .pp-award .rt svg{width:13px;height:13px;}
#wdi-ux-page .pp-award:hover{color:var(--ink);filter:drop-shadow(0 0 16px rgba(249,47,100,.25));transform:translateY(-1px);}
#wdi-ux-page .pp-award:hover .rt{color:var(--rose-600);opacity:1;}
#wdi-ux-page .pp-awards-micro{margin:50px auto 0;text-align:center;max-width:60ch;font-size:14px;font-weight:400;line-height:1.6;color:var(--muted);}
@media(max-width:760px){#wdi-ux-page .pp-awards{padding:70px 0 78px;}#wdi-ux-page .pp-awards-rail{gap:44px;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .pp-awards-rail{animation:none;}}

/* ============================================================
   small CTA (mini) + footer
   ============================================================ */
#wdi-ux-page .tsb-tile .av{display:grid;place-items:center;background:linear-gradient(135deg,var(--rose-500),var(--violet));overflow:hidden;}
#wdi-ux-page .tsb-tile .av span{font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff;}
#wdi-ux-page .pp-mini{position:relative;width:100vw;left:50%;transform:translateX(-50%);min-height:88vh;display:grid;place-items:center;text-align:center;overflow:hidden;background:#08090c;border-top:1px solid rgba(255,255,255,.06);}
#wdi-ux-page .pp-mini-aura{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;background:radial-gradient(40% 60% at 22% 32%,rgba(249,47,100,.42),transparent 60%),radial-gradient(40% 60% at 80% 68%,rgba(122,0,255,.4),transparent 62%),radial-gradient(50% 50% at 50% 50%,rgba(0,200,255,.08),transparent 60%);filter:blur(60px);opacity:.7;animation:ppMiniDrift 18s ease-in-out infinite alternate;}
@keyframes ppMiniDrift{0%{transform:translate(-3%,-2%) scale(1);}100%{transform:translate(3%,2%) scale(1.08);}}
#wdi-ux-page .pp-mini-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 45%,#000,transparent 82%);mask-image:radial-gradient(75% 75% at 50% 45%,#000,transparent 82%);}
#wdi-ux-page .pp-mini-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,rgba(8,9,12,.6),rgba(8,9,12,0) 30%,rgba(8,9,12,0) 70%,rgba(8,9,12,.7));}
#wdi-ux-page .pp-mini-in{position:relative;z-index:2;max-width:880px;padding:0 40px;display:flex;flex-direction:column;align-items:center;}
#wdi-ux-page .pp-mini-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page .pp-mini-eyebrow .lvdot{width:7px;height:7px;border-radius:50%;background:var(--rose-400);box-shadow:0 0 10px var(--rose-400);animation:ppCtaPulse 2.4s ease-out infinite;}
#wdi-ux-page .pp-mini-h{margin-top:26px;font-size:clamp(42px,7vw,104px);font-weight:600;letter-spacing:-0.045em;line-height:.96;color:#fff;text-wrap:balance;}
#wdi-ux-page .pp-mini-h em{font-style:normal;background:linear-gradient(110deg,var(--rose-400),var(--violet-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .pp-mini-p{margin:28px auto 0;max-width:52ch;font-size:clamp(16px,1.5vw,20px);font-weight:300;line-height:1.55;color:rgba(255,255,255,.74);}
#wdi-ux-page .pp-mini-btn{margin-top:42px;display:inline-flex;align-items:center;gap:13px;font-family:var(--font);font-size:16px;font-weight:500;color:#0B0C0E;background:#fff;border:1px solid #fff;border-radius:999px;padding:18px 20px 18px 32px;text-decoration:none;transition:transform .25s,box-shadow .3s;}
#wdi-ux-page .pp-mini-btn .ar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));color:#fff;display:grid;place-items:center;transition:transform .3s;}
#wdi-ux-page .pp-mini-btn .ar svg{width:18px;height:18px;}
#wdi-ux-page .pp-mini-btn:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(228,18,82,.34);}
#wdi-ux-page .pp-mini-btn:hover .ar{transform:translateX(3px) rotate(-8deg);}
@media(max-width:760px){#wdi-ux-page .pp-mini{min-height:0;padding:90px 0;}#wdi-ux-page .pp-mini-btn{width:100%;justify-content:center;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .pp-mini-aura{animation:none;}}

#wdi-ux-page .pp-foot{background:#0B0C0E;color:rgba(255,255,255,.7);padding:64px 0 30px;}
#wdi-ux-page .pp-foot-in{display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap;}
#wdi-ux-page .pp-foot-brand img{height:30px;width:auto;}
#wdi-ux-page .pp-foot-brand p{margin-top:16px;max-width:34ch;font-size:14px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.6);}
#wdi-ux-page .pp-foot-cols{display:flex;gap:60px;flex-wrap:wrap;}
#wdi-ux-page .pp-foot-cols b{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;margin-bottom:14px;}
#wdi-ux-page .pp-foot-cols a{display:block;font-size:14px;font-weight:300;color:rgba(255,255,255,.62);text-decoration:none;margin-bottom:10px;transition:color .2s;}
#wdi-ux-page .pp-foot-cols a:hover{color:var(--rose-400);}
#wdi-ux-page .pp-foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45);}
@media(max-width:760px){#wdi-ux-page .pp-mini-in{padding:26px;}#wdi-ux-page .pp-mini .pp-cta-btn{width:100%;justify-content:center;}}

/* ============================================================
   4 · IN THE WORKS AT WDI
   ============================================================ */
#wdi-ux-page .iw-sec{position:relative;padding:110px 0 130px;background:var(--bg-2);border-top:1px solid var(--line);}
#wdi-ux-page .iw-head{text-align:center;max-width:720px;margin:0 auto 56px;}
#wdi-ux-page .iw-head .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .iw-head .eyebrow::before,#wdi-ux-page .iw-head .eyebrow::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--rose-400));}
#wdi-ux-page .iw-head .eyebrow::after{background:linear-gradient(90deg,var(--rose-400),transparent);}
#wdi-ux-page .iw-head h2{margin-top:22px;font-size:clamp(32px,4.4vw,58px);font-weight:600;letter-spacing:-0.04em;line-height:1;color:var(--ink);}
#wdi-ux-page .iw-head h2 .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .iw-head p{margin-top:18px;font-size:16px;font-weight:300;line-height:1.55;color:var(--muted);}

#wdi-ux-page .iw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
#wdi-ux-page .iw-item{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);}
#wdi-ux-page .iw-sec.in .iw-item{opacity:1;transform:none;}

/* co-brand card */
#wdi-ux-page .iw-card{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:#0c0d11;border:1px solid var(--line);
  display:grid;place-items:center;transition:border-color .35s,box-shadow .35s,transform .4s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .iw-card::before{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(110% 90% at 18% 12%,color-mix(in srgb,var(--hue,#39E07B) 32%,transparent),transparent 58%),
  radial-gradient(100% 90% at 88% 90%,rgba(249,47,100,.32),transparent 60%),
  linear-gradient(155deg,#16181d,#0a0b0e);transition:transform .9s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .iw-card::after{content:"";position:absolute;inset:0;z-index:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 45%,#000,transparent 82%);mask-image:radial-gradient(75% 75% at 50% 45%,#000,transparent 82%);}
#wdi-ux-page .iw-item:hover .iw-card{border-color:var(--rose-300);transform:translateY(-5px);box-shadow:0 24px 50px rgba(11,12,14,.16);}
#wdi-ux-page .iw-item:hover .iw-card::before{transform:scale(1.08);}

/* industry tag */
#wdi-ux-page .iw-tag{position:absolute;left:16px;top:16px;z-index:2;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 11px;backdrop-filter:blur(6px);}
/* status dot */
#wdi-ux-page .iw-status{position:absolute;right:16px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);}
#wdi-ux-page .iw-status .lvdot{width:6px;height:6px;border-radius:50%;background:var(--hue,#39E07B);box-shadow:0 0 8px var(--hue,#39E07B);animation:iwPulse 2.2s ease-out infinite;}
@keyframes iwPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hue,#39E07B) 60%,transparent);}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}

/* WDI × project lockup */
#wdi-ux-page .iw-lock{position:relative;z-index:1;display:flex;align-items:center;gap:18px;}
#wdi-ux-page .iw-lock .wdi{height:30px;width:auto;}
#wdi-ux-page .iw-lock .x{font-size:18px;font-weight:300;color:rgba(255,255,255,.45);}
#wdi-ux-page .iw-lock .proj{font-size:24px;font-weight:700;letter-spacing:-0.02em;color:#fff;}
#wdi-ux-page .iw-lock .proj em{font-style:normal;color:var(--hue,#39E07B);}

/* meta below card */
#wdi-ux-page .iw-meta{margin-top:18px;padding:0 4px;}
#wdi-ux-page .iw-name{font-size:18px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
#wdi-ux-page .iw-desc{margin-top:7px;font-size:13.5px;font-weight:300;line-height:1.5;color:var(--muted);}

@media(max-width:980px){#wdi-ux-page .iw-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#wdi-ux-page .iw-grid{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .iw-item{opacity:1!important;transform:none!important;}#wdi-ux-page .iw-status .lvdot{animation:none;}}


/* ===== Testimonials (Variant B, copied) ===== */
#wdi-ux-page .ts-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .ts-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .ts-h{margin-top:22px;font-size:clamp(32px,3.8vw,52px);line-height:1.04;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .ts-sub{margin-top:20px;font-size:clamp(15px,1.25vw,17.5px);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:54ch;}

#wdi-ux-page .ts-key{
  position:relative;
  background:linear-gradient(120deg,var(--rose-600),var(--violet) 50%,var(--rose-400));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:600;
  animation:tsKeyShift 6s ease-in-out infinite,tsKeyGlow 4.5s ease-in-out infinite;
}
@keyframes tsKeyShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@keyframes tsKeyGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(249,47,100,0)) drop-shadow(0 0 0 rgba(122,0,255,0));}
  50%{filter:drop-shadow(0 0 10px rgba(249,47,100,.55)) drop-shadow(0 0 18px rgba(122,0,255,.35));}
}
/* VARIANT B */
#wdi-ux-page .tsb-sec{padding:100px 0 130px;background:var(--bg);border-top:1px solid var(--line);}
#wdi-ux-page .tsb-head{text-align:center;max-width:680px;margin:0 auto 56px;}
#wdi-ux-page .tsb-head .ts-h .accent{color:var(--rose-600);}
#wdi-ux-page .tsb-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:14px;}
#wdi-ux-page .tsb-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:24px 26px;border:1px solid var(--line);border-radius:18px;background:var(--bg);transition:border-color .35s,box-shadow .35s,transform .35s;}
#wdi-ux-page .tsb-tile:hover{border-color:var(--rose-300);transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,12,14,.06);}
#wdi-ux-page .tsb-tile .quote{font-size:15px;font-weight:400;line-height:1.5;color:var(--ink);}
#wdi-ux-page .tsb-tile .author{margin-top:18px;display:flex;align-items:center;gap:11px;}
#wdi-ux-page .tsb-tile .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#eee;flex:none;}
#wdi-ux-page .tsb-tile .av img{width:100%;height:100%;object-fit:cover;}
#wdi-ux-page .tsb-tile .name{font-size:13px;font-weight:500;color:var(--ink);}
#wdi-ux-page .tsb-tile .role{margin-top:1px;font-size:11.5px;color:var(--muted);}
#wdi-ux-page .tsb-tile.dark{background:linear-gradient(160deg,#0E0F12,#16181E);color:#fff;border-color:transparent;}
#wdi-ux-page .tsb-tile.dark .quote,#wdi-ux-page .tsb-tile.dark .name{color:#fff;}
#wdi-ux-page .tsb-tile.dark .role{color:rgba(255,255,255,.6);}
#wdi-ux-page .tsb-tile.lg{grid-column:span 4;grid-row:span 2;}
#wdi-ux-page .tsb-tile.md{grid-column:span 3;}
#wdi-ux-page .tsb-tile.sm{grid-column:span 2;}
#wdi-ux-page .tsb-tile.lg .quote{font-size:21px;font-weight:500;letter-spacing:-0.015em;line-height:1.4;}
#wdi-ux-page .tsb-tile.md .quote{font-size:16.5px;}


/* ============================================================
   WDI — Portfolio  (Variants A + B)  — image-forward, light
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--violet:#7A00FF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

#wdi-ux-page .pf-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .pf-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .pf-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

#wdi-ux-page .pf-sec{position:relative;padding:104px 0 118px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .pf-sec.alt{background:var(--bg-2);}

/* header */
#wdi-ux-page .pf-head{max-width:880px;position:relative;z-index:2;}
#wdi-ux-page .pf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .pf-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .pf-h{margin-top:20px;font-size:clamp(30px,3.8vw,50px);line-height:1.04;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .pf-intro{margin-top:20px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;font-weight:300;color:var(--ink-2);text-wrap:pretty;max-width:74ch;}
#wdi-ux-page .pf-sub{margin-top:14px;font-size:15px;line-height:1.65;font-weight:400;color:var(--muted);max-width:74ch;text-wrap:pretty;}

/* image slot base look (frames the empty + filled states) */
#wdi-ux-page image-slot{display:block;width:100%;height:100%;--is-bg:transparent;background:
  radial-gradient(120% 120% at 80% 10%,rgba(249,47,100,.10),transparent 55%),
  radial-gradient(100% 100% at 10% 95%,rgba(122,0,255,.08),transparent 60%),
  #0c0d11;color:rgba(255,255,255,.6);font-family:var(--font);}

/* shared bits */
#wdi-ux-page .pf-tag{font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap;transition:border-color .25s,color .25s,background .25s;}
#wdi-ux-page .pf-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.01em;color:#fff;background:rgba(10,11,14,.55);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 14px;backdrop-filter:blur(10px);}
#wdi-ux-page .pf-badge .d{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--rose-500),var(--rose-400));box-shadow:0 0 8px var(--rose-400);flex:none;}
#wdi-ux-page .pf-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:color .25s,gap .25s;}
#wdi-ux-page .pf-link svg{width:16px;height:16px;color:var(--rose-600);transition:transform .25s;}
#wdi-ux-page .pf-link:hover{color:var(--rose-600);gap:12px;}
#wdi-ux-page .pf-link:hover svg{transform:translateX(3px);}

/* section CTA */
#wdi-ux-page .pf-cta{margin-top:60px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:40px 44px;border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.07),transparent 58%),var(--bg);}
#wdi-ux-page .pf-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet));}
#wdi-ux-page .pf-cta-h{font-size:clamp(20px,2vw,27px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .pf-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
#wdi-ux-page .pf-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}
#wdi-ux-page .pf-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:500;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,box-shadow .25s;}
#wdi-ux-page .pf-btn svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .pf-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
#wdi-ux-page .pf-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .pf-btn-ghost{display:inline-flex;align-items:center;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;transition:border-color .25s,transform .25s;}
#wdi-ux-page .pf-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

/* stat strip under header */
#wdi-ux-page .pf-stats{margin-top:42px;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;position:relative;z-index:2;}
#wdi-ux-page .pf-stat{display:flex;flex-direction:column;gap:3px;}
#wdi-ux-page .pf-stat b{font-size:26px;font-weight:500;letter-spacing:-0.03em;color:var(--ink);}
#wdi-ux-page .pf-stat span{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:.01em;}
#wdi-ux-page .pf-stat-div{width:1px;height:34px;background:var(--line-2);}

/* ============================================================
   VARIANT A — EDITORIAL IMAGE GRID
   ============================================================ */
#wdi-ux-page .pfa-grid{margin-top:58px;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:26px;}
#wdi-ux-page .pfa-card{
  position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;
  background:var(--bg);overflow:hidden;text-decoration:none;color:inherit;
  transform:translateY(28px);
  transition:border-color .4s,box-shadow .4s,transform .5s cubic-bezier(.2,.7,.2,1);
}
#wdi-ux-page #portfolio-a.in .pfa-card{transform:none;transition:border-color .4s,box-shadow .4s,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d);}
#wdi-ux-page .pfa-card:hover{border-color:var(--rose-300);box-shadow:0 26px 64px rgba(11,12,14,.12);transform:translateY(-5px);}
#wdi-ux-page #portfolio-a.in .pfa-card:hover{transform:translateY(-5px);}

/* media slot */
#wdi-ux-page .pfa-media{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0c0d11;}
#wdi-ux-page .pfa-media image-slot{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pfa-card:hover .pfa-media image-slot{transform:scale(1.04);}
#wdi-ux-page .pfa-media-top{position:absolute;left:18px;right:18px;top:18px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none;}
#wdi-ux-page .pfa-cat{white-space:nowrap;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,11,14,.5);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px;backdrop-filter:blur(8px);}
/* bottom gradient + icon chip */
#wdi-ux-page .pfa-media-foot{position:absolute;left:18px;bottom:18px;z-index:3;display:flex;align-items:center;gap:10px;}
#wdi-ux-page .pfa-mico{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(8px);}
#wdi-ux-page .pfa-mico svg{width:21px;height:21px;}

/* body */
#wdi-ux-page .pfa-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1;}
#wdi-ux-page .pfa-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;font-weight:500;color:var(--muted);}
#wdi-ux-page .pfa-meta .sep{color:var(--line-2);}
#wdi-ux-page .pfa-meta .ind{color:var(--rose-600);}
#wdi-ux-page .pfa-title{margin-top:11px;font-size:clamp(22px,2vw,27px);font-weight:500;letter-spacing:-0.025em;line-height:1.1;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .pfa-desc{margin-top:12px;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-2);}
#wdi-ux-page .pfa-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;}
#wdi-ux-page .pfa-card:hover .pf-tag{border-color:var(--line-2);background:#fff;}
#wdi-ux-page .pfa-foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:14px;}

/* ============================================================
   VARIANT B — BIG BRAND CARDS (rose-only, fade + pop-up)
   Larger cards that fade and pop in over a moving vector
   background. Single brand accent (rose). No other hues.
   ============================================================ */
#wdi-ux-page .pfb-stack{margin-top:68px;position:relative;z-index:2;display:flex;flex-direction:column;gap:46px;}

/* moving background vector field */
#wdi-ux-page #pfbVec{position:absolute;inset:0;z-index:0;pointer-events:none;}
#wdi-ux-page #portfolio-b{position:relative;}
#wdi-ux-page #portfolio-b .wrap{position:relative;z-index:2;}

#wdi-ux-page .pfb-card{
  position:relative;display:grid;grid-template-columns:0.86fr 1.14fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:36px;overflow:hidden;background:var(--bg);
  min-height:560px;
  /* fade + pop base state */
  opacity:0;transform:translateY(56px) scale(.9);transform-origin:center 70%;
  transition:opacity .7s ease,transform .75s cubic-bezier(.34,1.4,.5,1),border-color .4s,box-shadow .5s;
  will-change:transform,opacity;
}
#wdi-ux-page .pfb-card.rise{opacity:1;transform:none;box-shadow:0 36px 90px rgba(11,12,14,.10);}
#wdi-ux-page .pfb-card:hover{border-color:var(--rose-300);box-shadow:0 48px 100px rgba(228,18,82,.15);}
#wdi-ux-page .pfb-card.flip{grid-template-columns:1.14fr 0.86fr;}
#wdi-ux-page .pfb-card.flip .pfb-info{order:2;}

/* left: brand info on a soft rose-tinted field */
#wdi-ux-page .pfb-info{position:relative;padding:64px 60px 58px;display:flex;flex-direction:column;
  background:radial-gradient(130% 120% at 12% 8%,rgba(249,47,100,.06),transparent 58%),var(--bg-2);overflow:hidden;}
#wdi-ux-page .pfb-info::before{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(249,47,100,.14),transparent 70%);filter:blur(28px);pointer-events:none;}
#wdi-ux-page .pfb-brandrow{display:flex;align-items:center;gap:16px;position:relative;}
#wdi-ux-page .pfb-logo{width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--rose-600);box-shadow:0 8px 22px rgba(11,12,14,.07);transition:transform .4s,box-shadow .4s;}
#wdi-ux-page .pfb-card:hover .pfb-logo{transform:translateY(-3px);box-shadow:0 14px 30px rgba(228,18,82,.16);}
#wdi-ux-page .pfb-logo svg{width:33px;height:33px;}
#wdi-ux-page .pfb-brandname{font-size:30px;font-weight:600;letter-spacing:-0.025em;color:var(--ink);line-height:1.02;}
#wdi-ux-page .pfb-brandcat{margin-top:5px;font-size:12.5px;font-weight:500;color:var(--rose-600);letter-spacing:.02em;}
#wdi-ux-page .pfb-desc{margin-top:26px;font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2);position:relative;max-width:46ch;}

/* two big stats */
#wdi-ux-page .pfb-stats{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;}
#wdi-ux-page .pfb-statcell{padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:border-color .35s,transform .35s,box-shadow .35s;}
#wdi-ux-page .pfb-card:hover .pfb-statcell{border-color:var(--line-2);}
#wdi-ux-page .pfb-statcell:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,12,14,.07);}
#wdi-ux-page .pfb-stat-big{font-size:clamp(30px,3vw,42px);font-weight:500;letter-spacing:-0.04em;line-height:1;background:linear-gradient(120deg,var(--rose-600),var(--rose-400) 70%,var(--rose-300));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .pfb-stat-lbl{margin-top:11px;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--muted);}
#wdi-ux-page .pfb-info-foot{margin-top:auto;padding-top:36px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:relative;}
#wdi-ux-page .pfb-info-foot .pf-link{font-size:15px;}

/* right: generous product image */
#wdi-ux-page .pfb-shot{position:relative;min-height:560px;background:#0c0d11;overflow:hidden;}
#wdi-ux-page .pfb-shot image-slot{position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pfb-card:hover .pfb-shot image-slot{transform:scale(1.045);}
#wdi-ux-page .pfb-shot-top{position:absolute;left:24px;right:24px;top:24px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;}
#wdi-ux-page .pfb-shot-cat{white-space:nowrap;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,11,14,.5);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 13px;backdrop-filter:blur(8px);}
#wdi-ux-page .pfb-shot-badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:#fff;background:rgba(10,11,14,.5);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 14px;backdrop-filter:blur(8px);}
#wdi-ux-page .pfb-shot-badge .d{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--rose-500),var(--rose-400));box-shadow:0 0 8px var(--rose-400);flex:none;}

/* ============================================================
   VARIANT C — CINEMATIC FULL-BLEED PANELS (SpaceX / Apple style)
   Edge-to-edge banners, image fills the frame, dark scrim,
   big light type, uppercase eyebrow, minimal link.
   ============================================================ */
#wdi-ux-page .pfc-sec{padding:0;border-top:1px solid var(--line);background:#08090c;}
#wdi-ux-page .pfc-head{max-width:var(--maxw);margin:0 auto;padding:104px 40px 56px;}
#wdi-ux-page .pfc-head .pf-eyebrow{color:var(--rose-400);}
#wdi-ux-page .pfc-head .pf-h{color:#fff;}
#wdi-ux-page .pfc-head .pf-intro{color:rgba(255,255,255,.74);}
#wdi-ux-page .pfc-head .pf-sub{color:rgba(255,255,255,.5);}

#wdi-ux-page .pfc-panel{position:relative;height:88vh;min-height:620px;max-height:920px;overflow:hidden;background:#0c0d11;border-top:1px solid rgba(255,255,255,.06);}
#wdi-ux-page .pfc-panel image-slot{position:absolute;inset:0;transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pfc-panel.in image-slot{transform:scale(1.02);}
#wdi-ux-page .pfc-panel:hover image-slot{transform:scale(1.06);}
/* cinematic scrim: dark bottom + slight top */
#wdi-ux-page .pfc-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to bottom,rgba(8,9,12,.45) 0%,rgba(8,9,12,0) 26%,rgba(8,9,12,0) 44%,rgba(8,9,12,.72) 82%,rgba(8,9,12,.92) 100%);}
/* faint rose top-edge wash */
#wdi-ux-page .pfc-glow{position:absolute;left:0;right:0;top:0;height:200px;z-index:1;pointer-events:none;background:radial-gradient(80% 140% at 18% 0%,rgba(249,47,100,.16),transparent 60%);}

#wdi-ux-page .pfc-content{position:absolute;left:0;right:0;bottom:0;z-index:2;}
#wdi-ux-page .pfc-inner{max-width:var(--maxw);margin:0 auto;padding:0 40px 64px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
#wdi-ux-page .pfc-left{max-width:760px;}
#wdi-ux-page .pfc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(22px);transition:opacity .7s ease .05s,transform .8s cubic-bezier(.2,.7,.2,1) .05s;}
#wdi-ux-page .pfc-eyebrow .n{color:var(--rose-400);}
#wdi-ux-page .pfc-eyebrow .bar{width:30px;height:1px;background:rgba(255,255,255,.4);}
#wdi-ux-page .pfc-title{margin-top:18px;font-size:clamp(40px,6vw,86px);font-weight:500;letter-spacing:-0.04em;line-height:0.98;color:#fff;
  opacity:0;transform:translateY(30px);transition:opacity .8s ease .12s,transform .9s cubic-bezier(.2,.7,.2,1) .12s;}
#wdi-ux-page .pfc-line{margin-top:20px;font-size:clamp(16px,1.5vw,20px);font-weight:300;line-height:1.5;color:rgba(255,255,255,.82);max-width:54ch;
  opacity:0;transform:translateY(24px);transition:opacity .8s ease .22s,transform .9s cubic-bezier(.2,.7,.2,1) .22s;}
#wdi-ux-page .pfc-meta{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  opacity:0;transform:translateY(20px);transition:opacity .8s ease .30s,transform .9s cubic-bezier(.2,.7,.2,1) .30s;}
#wdi-ux-page .pfc-stat{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:#fff;}
#wdi-ux-page .pfc-stat .d{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--rose-500),var(--rose-400));box-shadow:0 0 10px var(--rose-400);}
#wdi-ux-page .pfc-stat .sep{color:rgba(255,255,255,.3);margin:0 4px;}
#wdi-ux-page .pfc-cta{flex:none;align-self:flex-end;
  opacity:0;transform:translateY(20px);transition:opacity .8s ease .36s,transform .9s cubic-bezier(.2,.7,.2,1) .36s;}
#wdi-ux-page .pfc-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;padding:16px 26px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);transition:background .3s,border-color .3s,transform .3s,gap .3s;}
#wdi-ux-page .pfc-btn svg{width:16px;height:16px;transition:transform .3s;}
#wdi-ux-page .pfc-btn:hover{background:var(--rose-600);border-color:var(--rose-600);transform:translateY(-2px);gap:16px;}
#wdi-ux-page .pfc-btn:hover svg{transform:translateX(3px);}
/* reveal when panel in view */
#wdi-ux-page .pfc-panel.in .pfc-eyebrow,#wdi-ux-page .pfc-panel.in .pfc-title,#wdi-ux-page .pfc-panel.in .pfc-line,#wdi-ux-page .pfc-panel.in .pfc-meta,#wdi-ux-page .pfc-panel.in .pfc-cta{opacity:1;transform:none;}
/* corner index marker */
#wdi-ux-page .pfc-index{position:absolute;right:40px;top:40px;z-index:2;font-size:13px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.6);font-feature-settings:"tnum" 1;}
#wdi-ux-page .pfc-index b{color:#fff;}

/* dark CTA strip to close the section */
#wdi-ux-page .pfc-foot{max-width:var(--maxw);margin:0 auto;padding:74px 40px 104px;text-align:center;}
#wdi-ux-page .pfc-foot-h{font-size:clamp(24px,3vw,38px);font-weight:500;letter-spacing:-0.03em;color:#fff;text-wrap:balance;max-width:20ch;margin:0 auto;}
#wdi-ux-page .pfc-foot-p{margin:16px auto 0;font-size:16px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.6);max-width:60ch;}
#wdi-ux-page .pfc-foot-actions{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .pfc-foot .pfc-btn.solid{background:#fff;color:var(--ink);border-color:#fff;}
#wdi-ux-page .pfc-foot .pfc-btn.solid:hover{background:var(--rose-600);color:#fff;border-color:var(--rose-600);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  #wdi-ux-page .pfa-grid{grid-template-columns:1fr;}
  #wdi-ux-page .pfb-card,#wdi-ux-page .pfb-card.flip{grid-template-columns:1fr;min-height:0;}
  #wdi-ux-page .pfb-card.flip .pfb-info{order:0;}
  #wdi-ux-page .pfb-shot{order:-1;min-height:320px;}
}
@media(max-width:760px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .pf-sec{padding:70px 0 80px;}
  #wdi-ux-page .pf-vtag{padding:22px 22px 0;}
  #wdi-ux-page .pf-stats{gap:14px 26px;}
  #wdi-ux-page .pf-stat-div{display:none;}
  #wdi-ux-page .pfb-info{padding:34px 28px;}
  #wdi-ux-page .pfb-shot{min-height:240px;}
  #wdi-ux-page .pfc-head{padding:60px 22px 40px;}
  #wdi-ux-page .pfc-panel{height:auto;min-height:0;max-height:none;}
  #wdi-ux-page .pfc-panel image-slot{position:relative;height:300px;transform:none;}
  #wdi-ux-page .pfc-content{position:relative;background:#0c0d11;}
  #wdi-ux-page .pfc-inner{padding:28px 22px 36px;flex-direction:column;align-items:flex-start;gap:22px;}
  #wdi-ux-page .pfc-cta{align-self:stretch;}
  #wdi-ux-page .pfc-btn{width:100%;justify-content:center;}
  #wdi-ux-page .pfc-index{right:22px;top:22px;}
  #wdi-ux-page .pfc-foot{padding:54px 22px 70px;}
  #wdi-ux-page .pf-cta{padding:26px;gap:20px;}
  #wdi-ux-page .pf-cta-actions{width:100%;}
  #wdi-ux-page .pf-cta .pf-btn,#wdi-ux-page .pf-btn-ghost{flex:1;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .pfa-card{transform:none!important;}
  #wdi-ux-page .pfb-card{opacity:1!important;transform:none!important;transition:none;}
  #wdi-ux-page .pfa-media image-slot,#wdi-ux-page .pfb-shot image-slot{transition:none;}
  #wdi-ux-page .pfc-panel image-slot{transform:scale(1.02);transition:none;}
  #wdi-ux-page .pfc-eyebrow,#wdi-ux-page .pfc-title,#wdi-ux-page .pfc-line,#wdi-ux-page .pfc-meta,#wdi-ux-page .pfc-cta{opacity:1!important;transform:none!important;}
}

/* ============================================================
   WDI - Portfolio  ·  Variant D - VIDEO BENTO (dark, FLORA-style)
   Each card: looping video bg · product logo top-left · stats ·
   a single "View Portfolio" CTA that routes to the portfolio page.
   ============================================================ */
#wdi-ux-page .pfd-sec{
  position:relative;
  padding:108px 0 120px;
  background:#070708;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
/* faint brand glows behind the grid */
#wdi-ux-page .pfd-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% 0%,rgba(249,47,100,.10),transparent 60%),
    radial-gradient(55% 50% at 92% 8%,rgba(122,0,255,.10),transparent 62%),
    radial-gradient(70% 60% at 50% 110%,rgba(122,0,255,.07),transparent 60%);
}
#wdi-ux-page .pfd-sec .wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 40px;}

/* ---- header ---- */
#wdi-ux-page .pfd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;}
#wdi-ux-page .pfd-head-l{max-width:760px;}
#wdi-ux-page .pfd-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#FF6F92;}
#wdi-ux-page .pfd-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,#F92F64,#FD3B6F);box-shadow:0 0 12px rgba(249,47,100,.7);}
#wdi-ux-page .pfd-h{margin-top:18px;font-size:clamp(30px,3.6vw,48px);line-height:1.05;font-weight:500;letter-spacing:-.035em;color:#fff;text-wrap:balance;}
#wdi-ux-page .pfd-intro{margin-top:16px;font-size:clamp(15px,1.2vw,17.5px);line-height:1.6;font-weight:300;color:rgba(255,255,255,.62);max-width:64ch;text-wrap:pretty;}
#wdi-ux-page .pfd-head-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--font);font-size:14.5px;font-weight:500;color:#0B0C0E;background:#fff;border:none;border-radius:999px;padding:14px 22px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s,color .25s;}
#wdi-ux-page .pfd-head-cta svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .pfd-head-cta:hover{transform:translateY(-2px);background:#F92F64;color:#fff;box-shadow:0 14px 34px rgba(249,47,100,.34);}
#wdi-ux-page .pfd-head-cta:hover svg{transform:translateX(3px);}

/* ---- bento grid ---- */
#wdi-ux-page .pfd-grid{
  margin-top:46px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:286px;
  gap:14px;
}
#wdi-ux-page .pfd-card:nth-child(1){grid-column:1 / 9; grid-row:1;}
#wdi-ux-page .pfd-card:nth-child(2){grid-column:9 / 13;grid-row:1 / 3;}
#wdi-ux-page .pfd-card:nth-child(3){grid-column:1 / 4; grid-row:2;}
#wdi-ux-page .pfd-card:nth-child(4){grid-column:4 / 9; grid-row:2;}
#wdi-ux-page .pfd-card:nth-child(5){grid-column:1 / 7; grid-row:3;}
#wdi-ux-page .pfd-card:nth-child(6){grid-column:7 / 13;grid-row:3;}

/* ---- card ---- */
#wdi-ux-page .pfd-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  background:#0c0d11;
  border:1px solid rgba(255,255,255,.08);
  isolation:isolate;
  opacity:0;transform:translateY(22px);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s,border-color .3s,box-shadow .4s;
}
#wdi-ux-page .pfd-card.rise{opacity:1;transform:none;}
#wdi-ux-page .pfd-card:hover{border-color:rgba(255,255,255,.2);box-shadow:0 26px 60px rgba(0,0,0,.5);}

/* video layer */
#wdi-ux-page .pfd-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.04);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pfd-card:hover .pfd-vid{transform:scale(1.1);}
/* photo tiles - same fill as video, gentle hover zoom */
#wdi-ux-page .pfd-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block;transform:scale(1.04);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .pfd-card:hover .pfd-photo{transform:scale(1.1);}
#wdi-ux-page .pfd-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,5,6,.58) 0%,rgba(5,5,6,.34) 32%,rgba(5,5,6,.62) 70%,rgba(5,5,6,.92) 100%),
    rgba(5,5,6,.22);
  transition:opacity .4s;}
#wdi-ux-page .pfd-card:hover .pfd-scrim{opacity:.82;}
/* brand-tinted edge wash that intensifies on hover */
#wdi-ux-page .pfd-wash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 90% at 0% 100%,var(--brand,#F92F64),transparent 55%);
  mix-blend-mode:soft-light;transition:opacity .45s;}
#wdi-ux-page .pfd-card:hover .pfd-wash{opacity:.85;}

/* top - logo + wordmark */
#wdi-ux-page .pfd-top{position:relative;z-index:3;display:flex;align-items:center;gap:11px;padding:20px 22px;}
#wdi-ux-page .pfd-logo{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);color:#fff;}
#wdi-ux-page .pfd-logo svg{width:19px;height:19px;}
#wdi-ux-page .pfd-name{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4);}
#wdi-ux-page .pfd-card:nth-child(1) .pfd-name,
#wdi-ux-page .pfd-card:nth-child(2) .pfd-name{font-size:25px;}

/* bottom - category, stats, CTA */
#wdi-ux-page .pfd-bot{position:relative;z-index:3;padding:0 22px 20px;display:flex;flex-direction:column;}
#wdi-ux-page .pfd-cat{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.72);}
#wdi-ux-page .pfd-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:13px;overflow:hidden;max-height:60px;opacity:1;transition:max-height .34s cubic-bezier(.2,.7,.2,1),opacity .26s ease,margin-top .34s;}
#wdi-ux-page .pfd-card:hover .pfd-stats{max-height:0;opacity:0;margin-top:0;}

/* key impact - revealed on hover as a quiet, smartly-set line */
#wdi-ux-page .pfd-impact{
  position:relative;z-index:3;
  max-height:0;opacity:0;margin-top:0;overflow:hidden;
  display:flex;flex-direction:column;gap:5px;
  padding-left:13px;
  transition:max-height .36s cubic-bezier(.2,.7,.2,1),margin-top .36s cubic-bezier(.2,.7,.2,1),opacity .32s ease;
}
#wdi-ux-page .pfd-impact::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand,#F92F64),rgba(255,255,255,.25));}
#wdi-ux-page .pfd-impact-k{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);}
#wdi-ux-page .pfd-impact-t{font-size:16px;font-weight:500;line-height:1.28;letter-spacing:-.01em;color:#fff;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.45);}
#wdi-ux-page .pfd-card:hover .pfd-impact{max-height:120px;opacity:1;margin-top:13px;}
#wdi-ux-page .pfd-card:nth-child(1) .pfd-impact-t,
#wdi-ux-page .pfd-card:nth-child(2) .pfd-impact-t{font-size:18px;}
#wdi-ux-page .pfd-stat{display:flex;flex-direction:column;gap:2px;}
#wdi-ux-page .pfd-stat b{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1;}
#wdi-ux-page .pfd-stat span{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.6);letter-spacing:.01em;}
#wdi-ux-page .pfd-card:nth-child(1) .pfd-stat b,
#wdi-ux-page .pfd-card:nth-child(2) .pfd-stat b{font-size:25px;}

#wdi-ux-page .pfd-cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;color:#0B0C0E;
  background:#fff;border-radius:999px;
  max-height:0;padding:0 16px;margin-top:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:max-height .32s cubic-bezier(.2,.7,.2,1),margin-top .32s cubic-bezier(.2,.7,.2,1),padding .32s,opacity .3s ease,gap .25s,background .25s,color .25s,box-shadow .3s;
}
#wdi-ux-page .pfd-cta svg{width:15px;height:15px;transition:transform .25s;}
#wdi-ux-page .pfd-card:hover .pfd-cta{max-height:44px;padding:9px 16px;margin-top:14px;opacity:1;pointer-events:auto;background:var(--brand,#F92F64);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.4);}
#wdi-ux-page .pfd-card:hover .pfd-cta svg{transform:translateX(3px);}

/* small cards: tighten type a touch so nothing crowds */
#wdi-ux-page .pfd-card:nth-child(3) .pfd-stats,
#wdi-ux-page .pfd-card:nth-child(5) .pfd-stats{gap:20px;}

/* ---- responsive ---- */
@media (max-width:1080px){
  #wdi-ux-page .pfd-grid{grid-auto-rows:248px;}
  #wdi-ux-page .pfd-card:nth-child(1){grid-column:1 / 13;grid-row:1;}
  #wdi-ux-page .pfd-card:nth-child(2){grid-column:1 / 7; grid-row:2 / 4;}
  #wdi-ux-page .pfd-card:nth-child(3){grid-column:7 / 13;grid-row:2;}
  #wdi-ux-page .pfd-card:nth-child(4){grid-column:7 / 13;grid-row:3;}
  #wdi-ux-page .pfd-card:nth-child(5){grid-column:1 / 7; grid-row:4;}
  #wdi-ux-page .pfd-card:nth-child(6){grid-column:7 / 13;grid-row:4;}
}
@media (max-width:640px){
  #wdi-ux-page .pfd-sec{padding:72px 0 84px;}
  #wdi-ux-page .pfd-grid{grid-template-columns:1fr;grid-auto-rows:230px;gap:12px;}
  #wdi-ux-page .pfd-card:nth-child(n){grid-column:1 / 2 !important;grid-row:auto !important;}
  #wdi-ux-page .pfd-head-cta{display:none;}
}
@media (prefers-reduced-motion:reduce){
  #wdi-ux-page .pfd-card{opacity:1;transform:none;transition:none;}
  #wdi-ux-page .pfd-vid{transform:none;}
}

/* ============================================================
   WDI — Testimonials · Moving Wall
   3 rows · alternating directions · monochrome black/white cards
   with subtle pink accents · varied width + text length · real
   grayscale photos (colorize on hover) · country + industry chips
   · refined hover (lift, focus dim, accent underline, stars) ·
   hover types the quote out (pink caret).
   ============================================================ */
#wdi-ux-page .tsm-sec{position:relative;padding:108px 0 128px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .tsm-aura{position:absolute;inset:-12% -6%;z-index:0;pointer-events:none;
  background:
   radial-gradient(40% 48% at 8% 2%,rgba(249,47,100,.05),transparent 60%),
   radial-gradient(40% 48% at 92% 98%,rgba(122,0,255,.04),transparent 62%);}
#wdi-ux-page .tsm-sec>*{position:relative;z-index:1;}

/* ---------- header ---------- */
#wdi-ux-page .tsm-head{text-align:center;max-width:760px;margin:0 auto 58px;}
#wdi-ux-page .tsm-head .ts-eyebrow{justify-content:center;}
#wdi-ux-page .tsm-head .ts-h{margin-top:18px;font-size:clamp(32px,4.2vw,54px);font-weight:600;letter-spacing:-0.04em;line-height:1.02;color:var(--ink);}
#wdi-ux-page .tsm-head .ts-h .accent{color:var(--ink);position:relative;white-space:nowrap;}
#wdi-ux-page .tsm-head .ts-h .accent::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--rose-600),var(--rose-400) 70%,rgba(249,47,100,0));}
#wdi-ux-page .tsm-head .ts-sub{margin:20px auto 0;font-size:clamp(15px,1.25vw,17px);font-weight:300;line-height:1.55;color:var(--ink-2);max-width:56ch;}

/* ---------- rows (full-bleed) ---------- */
#wdi-ux-page .tsm-rows{width:100vw;position:relative;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
#wdi-ux-page .tsm-row{position:relative;overflow:visible;}
#wdi-ux-page .tsm-track{display:flex;gap:20px;width:max-content;padding:14px 10px;will-change:transform;}
#wdi-ux-page .tsm-track.left{animation:tsmScroll var(--dur,60s) linear infinite;}
#wdi-ux-page .tsm-track.right{animation:tsmScroll var(--dur,60s) linear infinite reverse;}
@keyframes tsmScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
#wdi-ux-page .tsm-row:hover .tsm-track{animation-play-state:paused;}
#wdi-ux-page .tsm-row:hover .tsm-card{opacity:.5;transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease,border-color .45s ease;}
#wdi-ux-page .tsm-row:hover .tsm-card:hover{opacity:1;}

/* ---------- card ---------- */
#wdi-ux-page .tsm-card{position:relative;flex:none;height:292px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:30px 32px 26px;border-radius:24px;background:#fff;
  border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,12,14,.03);
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease,border-color .45s ease,opacity .45s ease;
  cursor:default;overflow:hidden;}
#wdi-ux-page .tsm-card.sz-s{width:312px;}
#wdi-ux-page .tsm-card.sz-m{width:400px;}
#wdi-ux-page .tsm-card.sz-l{width:512px;}
#wdi-ux-page .tsm-card[data-th="dark"]{background:#0B0C0E;border-color:rgba(255,255,255,.10);box-shadow:0 1px 2px rgba(0,0,0,.22);}

/* quotation glyph */
#wdi-ux-page .tsm-mark{position:absolute;top:8px;left:26px;font-size:88px;line-height:1;font-family:Georgia,"Times New Roman",serif;
  font-weight:700;color:var(--line-2);pointer-events:none;z-index:0;transition:color .45s ease;}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-mark{color:rgba(255,255,255,.12);}
#wdi-ux-page .tsm-card:hover .tsm-mark{color:var(--rose-300);}

/* stars */
#wdi-ux-page .tsm-stars{position:absolute;top:30px;right:30px;display:flex;gap:3px;z-index:3;
  opacity:0;transform:translateY(-5px);transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1);}
#wdi-ux-page .tsm-stars svg{width:13px;height:13px;fill:var(--rose-500);}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-stars svg{fill:var(--rose-400);}
#wdi-ux-page .tsm-card:hover .tsm-stars{opacity:1;transform:none;}

/* body */
#wdi-ux-page .tsm-body{position:relative;z-index:1;flex:1;display:flex;align-items:center;min-height:0;}
#wdi-ux-page .tsm-quote{font-size:15.5px;line-height:1.56;font-weight:400;letter-spacing:-0.01em;color:var(--ink-2);text-wrap:pretty;}
#wdi-ux-page .tsm-card.sz-l .tsm-quote{font-size:17px;line-height:1.55;}
#wdi-ux-page .tsm-quote b{font-weight:600;color:var(--rose-600);}
#wdi-ux-page .tsm-pull{font-size:30px;line-height:1.06;font-weight:600;letter-spacing:-0.04em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-quote{color:rgba(255,255,255,.72);}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-quote b{color:var(--rose-300);}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-pull{color:#fff;}

/* typing caret (subtle pink) */
#wdi-ux-page .tsm-caret{display:inline-block;width:2px;height:1.02em;margin-left:2px;vertical-align:-2px;border-radius:1px;
  background:var(--rose-600);animation:tsmCaret .9s steps(1) infinite;}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-caret{background:var(--rose-400);}
#wdi-ux-page .tsm-caret.done{animation:none;opacity:0;}
@keyframes tsmCaret{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}

/* footer */
#wdi-ux-page .tsm-foot{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid var(--line);}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-foot{border-top-color:rgba(255,255,255,.10);}
#wdi-ux-page .tsm-person{display:flex;align-items:center;gap:13px;}
#wdi-ux-page .tsm-photo{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--line);
  filter:grayscale(1) contrast(1.03);
  transition:filter .55s ease,transform .55s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;}
#wdi-ux-page .tsm-card:hover .tsm-photo{filter:grayscale(0) contrast(1);transform:scale(1.06);box-shadow:0 8px 18px rgba(11,12,14,.2);}
#wdi-ux-page .tsm-meta{min-width:0;}
#wdi-ux-page .tsm-name{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-name{color:#fff;}
#wdi-ux-page .tsm-role{margin-top:2px;font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-role{color:rgba(255,255,255,.5);}

/* country + industry chips — clean, frosted, modern */
#wdi-ux-page .tsm-tags{display:flex;flex-wrap:wrap;gap:6px;}
#wdi-ux-page .tsm-chip{display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:550;line-height:1;letter-spacing:-0.005em;
  height:26px;padding:0 11px 0 9px;border-radius:999px;
  background:rgba(11,12,14,.035);border:0;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px rgba(11,12,14,.07);
  transition:background .35s ease,box-shadow .35s ease,color .35s ease,transform .45s cubic-bezier(.22,1,.36,1);}
#wdi-ux-page .tsm-chip.geo{color:var(--ink);}
/* circular mini-flag */
#wdi-ux-page .tsm-cflag{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:inset 0 0 0 1px rgba(11,12,14,.1);transition:transform .45s cubic-bezier(.22,1,.36,1);}
#wdi-ux-page .tsm-chip.ind{padding-left:11px;}
#wdi-ux-page .tsm-idot{width:5px;height:5px;border-radius:50%;background:var(--rose-500);flex:none;
  box-shadow:0 0 0 3px rgba(249,47,100,.14);transition:box-shadow .35s ease;}
/* hover */
#wdi-ux-page .tsm-card:hover .tsm-chip{transform:translateY(-1px);}
#wdi-ux-page .tsm-card:hover .tsm-chip.geo{box-shadow:inset 0 0 0 1px rgba(11,12,14,.13);}
#wdi-ux-page .tsm-card:hover .tsm-cflag{transform:scale(1.06);}
#wdi-ux-page .tsm-card:hover .tsm-chip.ind{background:rgba(249,47,100,.07);color:var(--rose-700);box-shadow:inset 0 0 0 1px rgba(249,47,100,.2);}
#wdi-ux-page .tsm-card:hover .tsm-chip.ind .tsm-idot{box-shadow:0 0 0 3px rgba(249,47,100,.22);}
/* dark chips */
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-chip{background:rgba(255,255,255,.05);color:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-chip.geo{color:#fff;}
#wdi-ux-page .tsm-card[data-th="dark"] .tsm-cflag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
#wdi-ux-page .tsm-card[data-th="dark"]:hover .tsm-chip.geo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);}
#wdi-ux-page .tsm-card[data-th="dark"]:hover .tsm-chip.ind{background:rgba(249,47,100,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(253,59,111,.4);}

/* hover lift + accent underline */
#wdi-ux-page .tsm-card:hover{transform:translateY(-10px);z-index:6;box-shadow:0 30px 64px -26px rgba(11,12,14,.34);border-color:var(--line-2);}
#wdi-ux-page .tsm-card[data-th="dark"]:hover{box-shadow:0 30px 64px -22px rgba(0,0,0,.62);border-color:rgba(255,255,255,.24);}
#wdi-ux-page .tsm-card::before{content:"";position:absolute;left:0;bottom:0;height:2.5px;width:100%;z-index:4;
  transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--rose-600),var(--violet));
  transition:transform .6s cubic-bezier(.22,1,.36,1);}
#wdi-ux-page .tsm-card:hover::before{transform:scaleX(1);}

/* entrance */
#wdi-ux-page .tsm-sec .tsm-rows{opacity:0;transform:translateX(-50%) translateY(22px);transition:opacity .7s ease,transform .85s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .tsm-sec.in .tsm-rows{opacity:1;transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion:reduce){
  #wdi-ux-page .tsm-track.left,#wdi-ux-page .tsm-track.right{animation:none;}
  #wdi-ux-page .tsm-sec .tsm-rows{opacity:1;transform:translateX(-50%);transition:none;}
  #wdi-ux-page .tsm-caret{animation:none;}
}

/* responsive */
@media (max-width:760px){
  #wdi-ux-page .tsm-sec{padding:78px 0 92px;}
  #wdi-ux-page .tsm-rows{gap:14px;}
  #wdi-ux-page .tsm-track{gap:14px;}
  #wdi-ux-page .tsm-card{height:272px;padding:24px 24px 22px;}
  #wdi-ux-page .tsm-card.sz-s{width:270px;}
  #wdi-ux-page .tsm-card.sz-m{width:326px;}
  #wdi-ux-page .tsm-card.sz-l{width:384px;}
  #wdi-ux-page .tsm-pull{font-size:25px;}
  #wdi-ux-page .tsm-quote,#wdi-ux-page .tsm-card.sz-l .tsm-quote{font-size:14.5px;}
  #wdi-ux-page .tsm-mark{font-size:70px;}
}

/* ============================================================
   WDI - Idea → Product PPC Landing Page
   Reuses tokens from portfolio-page-v2.css (--rose-*, --violet,
   --ink, --muted, --line, --font, --maxw). Design language mirrors
   the Portfolio V2 + Homepage system (pp- classes, bands, cards).
   ============================================================ */

/* smooth anchor scroll offset for the fixed-ish nav */
#wdi-ux-page{scroll-behavior:smooth;}
#wdi-ux-page .lp-sec{position:relative;padding:clamp(80px,9vw,132px) 0;background:var(--bg);overflow:hidden;}
#wdi-ux-page .lp-sec.alt{background:var(--page);}

/* shared header cluster ---------------------------------------- */
#wdi-ux-page .lp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .lp-eyebrow .lvdot{width:7px;height:7px;border-radius:50%;background:var(--rose-400);box-shadow:0 0 0 0 rgba(249,47,100,.6);animation:lpPulse 2.4s ease-out infinite;}
@keyframes lpPulse{0%{box-shadow:0 0 0 0 rgba(249,47,100,.5);}70%{box-shadow:0 0 0 8px rgba(249,47,100,0);}100%{box-shadow:0 0 0 0 rgba(249,47,100,0);}}
#wdi-ux-page .lp-eyebrow-c{justify-content:center;}
#wdi-ux-page .lp-head{max-width:820px;margin:0 auto 56px;text-align:center;}
#wdi-ux-page .lp-h{margin-top:20px;font-size:clamp(30px,4.4vw,58px);font-weight:600;letter-spacing:-0.04em;line-height:1.02;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .lp-h .amp,#wdi-ux-page .lp-h .grad,#wdi-ux-page .lp-h .mut{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:inherit;}
#wdi-ux-page .lp-aeo{margin:24px auto 0;max-width:70ch;font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.6;color:var(--ink-2);}
#wdi-ux-page .lp-supp{margin:16px auto 0;max-width:66ch;font-size:15px;font-weight:300;line-height:1.62;color:var(--muted);}

/* buttons ------------------------------------------------------ */
#wdi-ux-page .lp-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:-0.01em;border-radius:999px;padding:15px 26px;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,border-color .3s,box-shadow .3s;}
#wdi-ux-page .lp-btn .ar{display:inline-flex;width:20px;height:20px;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-btn .ar svg{width:100%;height:100%;}
#wdi-ux-page .lp-btn:hover .ar{transform:translateX(4px);}
#wdi-ux-page .lp-btn-primary{background:var(--ink);color:#fff;box-shadow:0 14px 34px rgba(11,12,14,.16);}
#wdi-ux-page .lp-btn-primary:hover{background:var(--rose-500);color:#fff;transform:translateY(-2px);box-shadow:0 20px 44px rgba(228,18,82,.34);}
#wdi-ux-page .lp-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
#wdi-ux-page .lp-btn-ghost:hover{border-color:var(--rose-500);color:var(--rose-600);transform:translateY(-2px);}
#wdi-ux-page .lp-btn-light{background:#fff;color:var(--ink);box-shadow:0 16px 40px rgba(0,0,0,.28);}
#wdi-ux-page .lp-btn-light:hover{background:var(--rose-500);color:#fff;transform:translateY(-2px);box-shadow:0 20px 46px rgba(228,18,82,.4);}
#wdi-ux-page .lp-btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);}
#wdi-ux-page .lp-btn-ghost-dark:hover{background:var(--rose-500);border-color:var(--rose-500);color:#fff;transform:translateY(-2px);box-shadow:0 18px 40px rgba(228,18,82,.4);}
#wdi-ux-page .lp-btn-big{font-size:17px;padding:20px 46px;gap:14px;}
#wdi-ux-page .lp-btn-big .ar{width:22px;height:22px;}
#wdi-ux-page .lp-inline-cta{margin-top:52px;display:flex;justify-content:center;}

/* standalone nav ---------------------------------------------- */
/* top contact banner (matches nav variant A/v3) */
#wdi-ux-page .nva3-topbar{position:relative;background:#0B0C0E;color:rgba(255,255,255,.82);font-size:13px;overflow:hidden;}
#wdi-ux-page .nva3-topbar::before{content:"";position:absolute;inset:-50% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 120% at 12% 50%,rgba(249,47,100,.5),transparent 60%),radial-gradient(34% 120% at 50% 50%,rgba(122,0,255,.42),transparent 62%),radial-gradient(40% 120% at 88% 50%,rgba(253,59,111,.4),transparent 60%);
  filter:blur(26px);opacity:.55;animation:nva3Aurora 14s ease-in-out infinite alternate;}
@keyframes nva3Aurora{0%{transform:translateX(-6%);}100%{transform:translateX(6%);}}
#wdi-ux-page .nva3-topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(249,47,100,.9),rgba(162,75,255,.9),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:nva3Sheen 5.5s linear infinite;}
@keyframes nva3Sheen{0%{background-position:-40% 0;}100%{background-position:140% 0;}}
#wdi-ux-page .nva3-tb-in{position:relative;z-index:2;max-width:1300px;margin:0 auto;padding:0 clamp(22px,5vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;height:44px;}
#wdi-ux-page .nva3-tb-note{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.74);font-weight:300;}
#wdi-ux-page .nva3-tb-note .lvdot{width:7px;height:7px;border-radius:50%;background:#36D399;box-shadow:0 0 0 0 rgba(54,211,153,.6);animation:nva3Pulse 2.4s ease-out infinite;flex:none;}
@keyframes nva3Pulse{0%{box-shadow:0 0 0 0 rgba(54,211,153,.55);}70%{box-shadow:0 0 0 7px rgba(54,211,153,0);}100%{box-shadow:0 0 0 0 rgba(54,211,153,0);}}
#wdi-ux-page .nva3-tb-note svg{width:15px;height:15px;color:var(--rose-400);flex:none;}
#wdi-ux-page .nva3-tb-right{display:flex;align-items:center;gap:14px;}
#wdi-ux-page .nva3-tb-ph{display:inline-flex;align-items:center;gap:7px;font-weight:400;color:rgba(255,255,255,.85);text-decoration:none;transition:color .2s;}
#wdi-ux-page .nva3-tb-ph:hover{color:#fff;}
#wdi-ux-page .nva3-tb-ph .rg{font-size:10px;font-weight:700;letter-spacing:.1em;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:2px 6px;}
#wdi-ux-page .nva3-tb-sep{width:1px;height:16px;background:rgba(255,255,255,.16);}
#wdi-ux-page .nva3-tb-mail{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 14px;margin-left:4px;text-decoration:none;transition:background .25s,border-color .25s,transform .25s;}
#wdi-ux-page .nva3-tb-mail svg{width:14px;height:14px;color:var(--rose-300);}
#wdi-ux-page .nva3-tb-mail:hover{background:var(--rose-600);border-color:var(--rose-600);transform:translateY(-1px);}
@media(max-width:860px){
  #wdi-ux-page .nva3-tb-note{display:none;}
  #wdi-ux-page .nva3-tb-in{justify-content:center;height:auto;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:10px;}
}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .nva3-topbar::before,#wdi-ux-page .nva3-topbar::after{animation:none;}#wdi-ux-page .nva3-tb-note .lvdot{animation:none;}}
#wdi-ux-page .lpnav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);}
#wdi-ux-page .lpnav-in{max-width:1300px;margin:0 auto;padding:0 40px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
#wdi-ux-page .lpnav-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;}
#wdi-ux-page .lpnav-mark{width:30px;height:30px;display:block;}
#wdi-ux-page .lpnav-name{display:inline-flex;align-items:baseline;gap:8px;font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);line-height:1;}
#wdi-ux-page .lpnav-name em{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:-0.005em;}
#wdi-ux-page .lpnav-cta{display:flex;align-items:center;gap:12px;}
#wdi-ux-page .lpnav-btn{padding:11px 20px;font-size:14px;}

/* standalone footer ------------------------------------------- */
#wdi-ux-page .lpfoot{position:relative;overflow:hidden;background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;padding:clamp(58px,7vw,90px) 0 36px;}
#wdi-ux-page .lpfoot-aura{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(46% 72% at 22% 0%,rgba(249,47,100,.16),transparent 62%),radial-gradient(40% 60% at 92% 20%,rgba(122,0,255,.12),transparent 64%);}
#wdi-ux-page .lpfoot-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,96px);align-items:start;}
#wdi-ux-page .lpfoot-l{max-width:none;}
#wdi-ux-page .lpfoot-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;}
#wdi-ux-page .lpfoot-mark{width:30px;height:30px;display:block;}
#wdi-ux-page .lpfoot-name{display:inline-flex;align-items:baseline;gap:8px;font-size:19px;font-weight:700;letter-spacing:-0.02em;color:#fff;}
#wdi-ux-page .lpfoot-name em{font-style:normal;font-size:13px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:-0.005em;}
#wdi-ux-page .lpfoot-tag{margin-top:20px;max-width:52ch;font-size:15px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.62);text-align:left;}
#wdi-ux-page .lpfoot-r{min-width:min(440px,44vw);}
#wdi-ux-page .lpfoot-cta-h{font-size:clamp(25px,2.6vw,34px);font-weight:600;letter-spacing:-0.03em;color:#fff;}
#wdi-ux-page .lpfoot-cta-p{margin-top:12px;font-size:15px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.6);max-width:46ch;}
#wdi-ux-page .lpfoot-form{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;}
#wdi-ux-page .lpfoot-input{flex:1;min-width:210px;height:54px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-family:var(--font);font-size:15px;outline:none;transition:border-color .3s,background .3s;}
#wdi-ux-page .lpfoot-input::placeholder{color:rgba(255,255,255,.45);}
#wdi-ux-page .lpfoot-input:focus{border-color:var(--rose-400);background:rgba(255,255,255,.1);}
#wdi-ux-page .lpfoot-formbtn{flex:none;height:54px;font-size:15.5px;padding:0 26px;}
#wdi-ux-page .lpfoot-sub{display:inline-block;margin-top:18px;font-size:15px;font-weight:500;letter-spacing:-0.01em;color:rgba(255,255,255,.7);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;transition:color .3s,border-color .3s;}
#wdi-ux-page .lpfoot-sub:hover{color:var(--rose-300);border-color:var(--rose-400);}
#wdi-ux-page .lpfoot-recog{display:none;}
#wdi-ux-page .lpfoot-badges{margin-top:26px;display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);flex-wrap:wrap;}
#wdi-ux-page .lpfoot-badges img{height:88px;width:auto;max-width:100%;object-fit:contain;opacity:.94;transition:opacity .3s,transform .3s;}
#wdi-ux-page .lpfoot-badges img[src*="goodfirms"]{height:64px;}
#wdi-ux-page .lpfoot-badges img:hover{opacity:1;transform:translateY(-3px);}
#wdi-ux-page .lpfoot-contact{margin-top:26px;display:flex;align-items:center;gap:22px;text-decoration:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px 22px;transition:border-color .3s,background .3s,transform .3s;}
#wdi-ux-page .lpfoot-contact:hover{border-color:var(--rose-400);background:rgba(249,47,100,.08);transform:translateY(-2px);}
#wdi-ux-page .lpfoot-contact-l{display:flex;flex-direction:column;gap:3px;}
#wdi-ux-page .lpfoot-contact-k{font-size:14px;font-weight:600;letter-spacing:-0.01em;color:#fff;}
#wdi-ux-page .lpfoot-contact-sub{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.55);}
#wdi-ux-page .lpfoot-contact-r{display:flex;align-items:center;gap:10px;padding-left:20px;border-left:1px solid rgba(255,255,255,.14);}
#wdi-ux-page .lpfoot-contact-ic{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--rose-500),var(--violet));color:#fff;}
#wdi-ux-page .lpfoot-contact-ic svg{width:17px;height:17px;}
#wdi-ux-page .lpfoot-contact-num{font-size:16px;font-weight:600;letter-spacing:-0.01em;color:#fff;white-space:nowrap;}
#wdi-ux-page .lpfoot-bottom{grid-column:1 / -1;margin-top:clamp(30px,3.4vw,40px);padding-top:26px;border-top:1px solid rgba(255,255,255,.1);width:100%;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:400;color:rgba(255,255,255,.5);}

/* trusted ecosystem ------------------------------------------- */
#wdi-ux-page .lp-eco{position:relative;background:#F4F5F7;padding:clamp(50px,6vw,84px) 0;overflow:hidden;}
#wdi-ux-page .lp-eco-head{text-align:center;max-width:760px;}
#wdi-ux-page .lp-eco-head .lp-eyebrow{justify-content:center;}
#wdi-ux-page .lp-eco-h{margin-top:16px;font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .lp-eco-sub{margin:14px auto 0;max-width:58ch;font-size:clamp(14px,1.2vw,16px);font-weight:300;line-height:1.6;color:var(--muted);}
#wdi-ux-page .lp-eco-strip{margin-top:clamp(38px,4vw,54px);position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
#wdi-ux-page .lp-eco-track{display:flex;align-items:center;gap:64px;width:max-content;animation:lpEco 48s linear infinite;}
#wdi-ux-page .lp-eco-strip:hover .lp-eco-track{animation-play-state:paused;}
@keyframes lpEco{to{transform:translateX(-50%);}}
#wdi-ux-page .lp-eco-logo{flex:none;display:flex;align-items:center;white-space:nowrap;}
#wdi-ux-page .lp-eco-logo img{height:38px;width:auto;object-fit:contain;filter:grayscale(1) opacity(.62);transition:filter .35s,transform .35s;}
#wdi-ux-page .lp-eco-logo:hover img{filter:grayscale(0) opacity(1);transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){#wdi-ux-page .lp-eco-track{animation:none;flex-wrap:wrap;justify-content:center;}}

/* reveal ------------------------------------------------------- */
#wdi-ux-page .lp-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){#wdi-ux-page .lp-reveal{opacity:1;transform:none;}}

/* ============================================================
   1 · HERO
   ============================================================ */
#wdi-ux-page .lp-hero{position:relative;padding:clamp(120px,14vw,180px) 0 clamp(80px,9vw,120px);text-align:center;background:var(--bg);overflow:hidden;}
#wdi-ux-page .lp-hero-aura{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(48% 60% at 76% 8%,rgba(249,47,100,.12),transparent 60%),radial-gradient(42% 56% at 14% 30%,rgba(122,0,255,.10),transparent 62%);}
#wdi-ux-page .lp-hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%);-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%);}
#wdi-ux-page .lp-hero-in{position:relative;z-index:2;}
/* mouse-follow spotlight */
#wdi-ux-page .lp-hero-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(340px 340px at var(--mx,50%) var(--my,30%),rgba(249,47,100,.16),rgba(122,0,255,.08) 42%,transparent 68%);}
#wdi-ux-page .lp-hero:hover .lp-hero-spot{opacity:1;}
/* rising electrical pulses */
#wdi-ux-page .lp-hero-pulses{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  mask-image:radial-gradient(75% 70% at 50% 34%,#000,transparent 82%);-webkit-mask-image:radial-gradient(75% 70% at 50% 34%,#000,transparent 82%);}
#wdi-ux-page .lp-hero-pulses i{position:absolute;bottom:-8%;width:2px;height:64px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(249,47,100,.7),rgba(162,75,255,.5),transparent);
  opacity:0;animation:lpHeroPulse linear infinite;}
@keyframes lpHeroPulse{0%{transform:translateY(0) scaleY(.4);opacity:0;}12%{opacity:.9;}88%{opacity:.9;}100%{transform:translateY(-118vh) scaleY(1);opacity:0;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .lp-hero-pulses{display:none;}#wdi-ux-page .lp-hero-spot{display:none;}}

/* ============================================================
   1.5 · INTERSTITIAL STATEMENT BAND (near-black)
   ============================================================ */
#wdi-ux-page .lp-band{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0B0C0E 0%,#101116 100%);color:#fff;
  padding:clamp(72px,10vw,128px) 0;text-align:center;}
#wdi-ux-page .lp-band-aura{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 70% at 20% 22%,rgba(249,47,100,.16),transparent 60%),radial-gradient(46% 70% at 82% 80%,rgba(122,0,255,.16),transparent 62%);}
#wdi-ux-page .lp-band-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.38;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:58px 58px;mask-image:radial-gradient(72% 72% at 50% 50%,#000,transparent 78%);-webkit-mask-image:radial-gradient(72% 72% at 50% 50%,#000,transparent 78%);}
#wdi-ux-page .lp-band-in{position:relative;z-index:2;max-width:940px;margin:0 auto;}
#wdi-ux-page .lp-band-quote{margin:24px auto 0;max-width:900px;font-size:clamp(26px,3.6vw,46px);font-weight:600;letter-spacing:-0.035em;line-height:1.12;color:#fff;text-wrap:balance;}
#wdi-ux-page .lp-band-by{margin:24px auto 0;max-width:620px;font-size:clamp(15px,1.5vw,17px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.6);letter-spacing:-0.004em;text-wrap:pretty;}
#wdi-ux-page .lp-hero-h{margin-top:26px;font-size:clamp(44px,8vw,104px);font-weight:600;letter-spacing:-0.05em;line-height:.95;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .lp-hero-h .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .lp-hero-aeo{margin:28px auto 0;max-width:64ch;font-size:clamp(16px,1.6vw,20px);font-weight:300;line-height:1.55;color:var(--ink-2);}
#wdi-ux-page .lp-hero-sub{margin:16px auto 0;max-width:60ch;font-size:15.5px;font-weight:300;line-height:1.6;color:var(--muted);}
#wdi-ux-page .lp-hero-cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .lp-hero-trust{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,38px);flex-wrap:wrap;}
#wdi-ux-page .lp-hero-trust .t b{font-size:26px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
#wdi-ux-page .lp-hero-trust .t span{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--muted);}
#wdi-ux-page .lp-hero-trust .d{width:1px;height:32px;background:var(--line-2);}

/* ============================================================
   2 · FORM SECTION (reuses ct-form-sec + launch-form-v2)
   ============================================================ */
#wdi-ux-page .lp-form-sec{background:var(--bg);padding-bottom:clamp(40px,6vw,80px);}
#wdi-ux-page .lp-form-head{text-align:center;max-width:760px;margin:clamp(40px,5vw,64px) auto clamp(24px,3vw,36px);}
#wdi-ux-page .lp-form-head .lp-eyebrow{justify-content:center;}
#wdi-ux-page .lp-form-head .lp-lead{margin:20px auto 0;max-width:62ch;font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2);}

/* ============================================================
   3 · PROBLEM FRAMING - editorial no-box list
   ============================================================ */
#wdi-ux-page .lp-problem{position:relative;isolation:isolate;overflow:hidden;}
#wdi-ux-page .lp-problem .wrap{position:relative;z-index:2;}
#wdi-ux-page .lp-prob-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;}
#wdi-ux-page .lp-prob-grid{display:flex;flex-direction:column;gap:0;max-width:none;margin:clamp(20px,3vw,36px) 0 0;border-top:1px solid var(--line);}
#wdi-ux-page .lp-prob{position:relative;display:flex;align-items:flex-start;gap:clamp(20px,3vw,44px);padding:clamp(28px,3.2vw,42px) 2px;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(48px);
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.75,.2,1);}
#wdi-ux-page .lp-prob.in{opacity:1;transform:none;}
#wdi-ux-page .lp-prob:nth-child(even){background:rgba(15,17,20,.028);}
#wdi-ux-page .lp-prob{border-radius:14px;padding-left:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px);}
#wdi-ux-page .lp-prob::before{content:"";position:absolute;left:0;top:-1px;height:calc(100% + 1px);width:2px;background:linear-gradient(180deg,var(--rose-500),var(--violet-2));transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-prob:hover::before{transform:scaleY(1);}
#wdi-ux-page .lp-prob .n{flex:none;font-size:clamp(30px,3.4vw,46px);font-weight:300;letter-spacing:-0.03em;line-height:.9;color:var(--rose-500);font-feature-settings:"tnum" 1;min-width:clamp(52px,5vw,84px);transition:transform .4s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-prob:hover .n{transform:translateX(4px);}
#wdi-ux-page .lp-prob-c{flex:1;min-width:0;}
#wdi-ux-page .lp-prob p{margin:0;font-size:clamp(19px,1.9vw,26px);font-weight:600;line-height:1.2;color:var(--ink);letter-spacing:-0.025em;}
#wdi-ux-page .lp-prob-sub{display:block;margin-top:11px;font-size:clamp(14px,1.15vw,16px);font-weight:300;line-height:1.6;color:var(--muted);max-width:70ch;}
@media (prefers-reduced-motion:reduce){#wdi-ux-page .lp-prob{opacity:1;transform:none;}}
#wdi-ux-page .lp-prob-close{position:relative;margin:56px auto 0;max-width:760px;text-align:center;font-size:clamp(21px,2.4vw,30px);font-weight:500;letter-spacing:-0.025em;line-height:1.2;color:var(--ink);}
#wdi-ux-page .lp-prob-close::after{content:"";display:block;width:52px;height:2px;margin:22px auto 0;background:linear-gradient(90deg,var(--rose-500),var(--violet));border-radius:2px;}

/* ============================================================
   3.5 · IDEA-FIT DIAGNOSTIC - incident.io-style bento (grey band)
   ============================================================ */
#wdi-ux-page .lp-diag{background:#F4F5F7;}
#wdi-ux-page .lp-diag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
/* header cell (first grid slot) */
#wdi-ux-page .lp-diag-head{display:flex;flex-direction:column;padding:8px 12px 8px 0;}
#wdi-ux-page .lp-diag-head .lp-eyebrow{justify-content:flex-start;}
#wdi-ux-page .lp-diag-h{margin-top:18px;font-size:clamp(26px,2.7vw,36px);font-weight:600;letter-spacing:-0.03em;line-height:1.05;color:var(--ink);}
#wdi-ux-page .lp-diag-sub{margin-top:16px;font-size:15px;font-weight:300;line-height:1.6;color:var(--muted);max-width:36ch;}
#wdi-ux-page .lp-diag-link{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--rose-600);transition:gap .3s,color .3s;}
#wdi-ux-page .lp-diag-link svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-diag-link:hover{color:var(--rose-500);gap:13px;}
#wdi-ux-page .lp-diag-link:hover svg{transform:translateX(3px);}
/* cards - 3D flip on hover */
#wdi-ux-page .lp-diag-card{position:relative;height:320px;border-radius:22px;perspective:1400px;background:transparent;border:none;}
#wdi-ux-page .lp-diag-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.5,.05,.2,1);}
#wdi-ux-page .lp-diag-card:hover .lp-diag-inner,#wdi-ux-page .lp-diag-card:focus-within .lp-diag-inner{transform:rotateY(180deg);}
#wdi-ux-page .lp-diag-face{position:absolute;inset:0;height:100%;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 1px 0 rgba(11,12,14,.02);}
#wdi-ux-page .lp-diag-back{transform:rotateY(180deg);}
#wdi-ux-page .lp-diag-ic{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:14px;
  background:#F3F4F6;border:1px solid var(--line);color:var(--ink);}
#wdi-ux-page .lp-diag-ic svg{width:26px;height:26px;}
/* back face: mid list sits below the header, not pinned to bottom */
#wdi-ux-page .lp-diag-back .lp-diag-mid{margin-top:22px;padding-top:0;}
#wdi-ux-page .lp-diag-front .lp-diag-mid{margin-top:auto;padding-top:24px;}
#wdi-ux-page .lp-diag-t{font-size:20px;font-weight:600;letter-spacing:-0.025em;line-height:1.12;color:var(--ink);}
#wdi-ux-page .lp-diag-best{margin-top:11px;font-size:14px;font-weight:300;line-height:1.55;color:var(--muted);}
/* back face: icon + service title header, then list */
#wdi-ux-page .lp-diag-bhead{display:flex;align-items:center;gap:14px;}
#wdi-ux-page .lp-diag-bt{font-size:16px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;color:var(--ink);}
#wdi-ux-page .lp-diag-back .lb{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
#wdi-ux-page .lp-diag-back ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:9px;}
#wdi-ux-page .lp-diag-back li{position:relative;padding-left:22px;font-size:13.5px;font-weight:400;letter-spacing:-0.01em;color:var(--ink);line-height:1.28;}
#wdi-ux-page .lp-diag-back li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--rose-500),var(--violet));}
#wdi-ux-page .lp-diag-back li::after{content:"";position:absolute;left:3.8px;top:8.4px;width:3px;height:5.5px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);}
/* AI accent card */
#wdi-ux-page .lp-diag-card-ai .lp-diag-face{background:linear-gradient(150deg,var(--rose-500),var(--rose-600));border-color:transparent;color:#fff;}
#wdi-ux-page .lp-diag-card-ai .lp-diag-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff;}
#wdi-ux-page .lp-diag-card-ai .lp-diag-t{color:#fff;}
#wdi-ux-page .lp-diag-card-ai .lp-diag-best{color:rgba(255,255,255,.82);}
#wdi-ux-page .lp-diag-card-ai .lp-diag-bt{color:#fff;}
#wdi-ux-page .lp-diag-card-ai .lp-diag-back .lb{color:rgba(255,255,255,.75);}
#wdi-ux-page .lp-diag-card-ai .lp-diag-back li{color:#fff;}
#wdi-ux-page .lp-diag-card-ai .lp-diag-back li::before{background:#fff;}
#wdi-ux-page .lp-diag-card-ai .lp-diag-back li::after{border-color:var(--rose-600);}
@media (prefers-reduced-motion:reduce){
  #wdi-ux-page .lp-diag-inner{transition:none;}
}

/* ============================================================
   4.7 · PRODUCT INTELLIGENCE WORKFLOW - light convergence (aggregator-style)
   ============================================================ */
#wdi-ux-page .piw{background:#fff;color:var(--ink);}
#wdi-ux-page .piw-head .lp-eyebrow{justify-content:center;}
#wdi-ux-page .piw-head .lp-aeo{margin-left:auto;margin-right:auto;}
#wdi-ux-page .piw-head .lp-h{margin-top:20px;}

/* stage card */
#wdi-ux-page .piw-stage{position:relative;width:100%;max-width:1040px;margin:0 auto;aspect-ratio:1200/620;
  background:linear-gradient(180deg,#F5F6F8,#F1F2F5);border:1px solid var(--line);border-radius:32px;overflow:hidden;
  box-shadow:0 30px 70px -46px rgba(11,12,14,.3),inset 0 1px 0 rgba(255,255,255,.7);}
#wdi-ux-page .piw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
#wdi-ux-page .piw-track-under path{opacity:0;transition:opacity .5s ease;}
#wdi-ux-page .piw-stage.go .piw-track-under path{opacity:1;}
#wdi-ux-page .piw-track path{stroke-dashoffset:100;stroke-dasharray:100;filter:drop-shadow(0 1px 1px rgba(11,12,14,.04));}
#wdi-ux-page .piw-stage.go .piw-track path{animation:piwDraw 1.3s cubic-bezier(.35,0,.15,1) forwards;}
#wdi-ux-page .piw-stage.go .piw-track #pw2{animation-delay:.12s;}
#wdi-ux-page .piw-stage.go .piw-track #pw3{animation-delay:.24s;}
#wdi-ux-page .piw-stage.go .piw-track #pw4{animation-delay:.36s;}
#wdi-ux-page .piw-stage.go .piw-track #pwOut{animation-delay:1s;}
@keyframes piwDraw{to{stroke-dashoffset:0;}}
#wdi-ux-page .piw-junc{opacity:0;transition:opacity .5s ease;}
#wdi-ux-page .piw-stage.go .piw-junc{opacity:1;transition-delay:.7s;}
#wdi-ux-page .piw-dots{opacity:0;transition:opacity .7s ease;}
#wdi-ux-page .piw-stage.go .piw-dots{opacity:1;transition-delay:1s;}
#wdi-ux-page .piw-dots circle{filter:drop-shadow(0 3px 6px rgba(11,12,14,.16));}

/* input chips */
#wdi-ux-page .piw-chip{position:absolute;top:9.5%;transform:translate(-50%,-50%);z-index:3;
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:10px 18px 10px 11px;
  font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);
  box-shadow:0 8px 24px rgba(11,12,14,.08),inset 0 1px 0 rgba(255,255,255,.8);opacity:0;transform:translate(-50%,-50%) translateY(-12px);}
#wdi-ux-page .piw-stage.go .piw-chip{opacity:1;transform:translate(-50%,-50%);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .piw-stage.go .piw-chip:nth-of-type(2){transition-delay:.09s;}
#wdi-ux-page .piw-stage.go .piw-chip:nth-of-type(3){transition-delay:.18s;}
#wdi-ux-page .piw-stage.go .piw-chip:nth-of-type(4){transition-delay:.27s;}
#wdi-ux-page .piw-chip-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--rose-500);color:#fff;font-size:11px;font-weight:700;font-feature-settings:"tnum" 1;}

/* convergence core */
#wdi-ux-page .piw-core{position:absolute;transform:translate(-50%,-50%);z-index:4;display:grid;place-items:center;
  opacity:0;scale:.82;}
#wdi-ux-page .piw-stage.go .piw-core{opacity:1;scale:1;transition:opacity .7s ease .6s,scale .9s cubic-bezier(.2,.7,.2,1) .6s;}
#wdi-ux-page .piw-core-ring{position:absolute;width:118px;height:118px;border-radius:50%;border:1.5px solid rgba(228,18,82,.4);}
#wdi-ux-page .piw-core-ring.r2{width:118px;height:118px;}
#wdi-ux-page .piw-stage.go .piw-core-ring{animation:piwRing 3.2s cubic-bezier(.2,.6,.3,1) infinite;}
#wdi-ux-page .piw-stage.go .piw-core-ring.r2{animation-delay:1.6s;}
@keyframes piwRing{0%{transform:scale(.72);opacity:.85;}70%{opacity:.1;}100%{transform:scale(1.7);opacity:0;}}
#wdi-ux-page .piw-core-pill{position:relative;z-index:2;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  background:linear-gradient(150deg,#17181d,#0b0c0e);color:#fff;border-radius:999px;padding:15px 26px 15px 15px;
  box-shadow:0 0 0 7px rgba(228,18,82,.07),0 22px 50px rgba(11,12,14,.32);}
#wdi-ux-page .piw-stage.go .piw-core-pill{animation:piwBreathe 5s ease-in-out infinite;}
@keyframes piwBreathe{0%,100%{box-shadow:0 0 0 7px rgba(228,18,82,.07),0 22px 50px rgba(11,12,14,.32);}50%{box-shadow:0 0 0 9px rgba(228,18,82,.12),0 26px 56px rgba(11,12,14,.34);}}
#wdi-ux-page .piw-core-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);}
#wdi-ux-page .piw-core-ic svg{width:19px;height:19px;color:var(--rose-300);}
#wdi-ux-page .piw-core-txt{font-size:15px;font-weight:600;letter-spacing:-0.02em;}

/* output node */
#wdi-ux-page .piw-out{position:absolute;transform:translate(-50%,-50%);z-index:3;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:linear-gradient(120deg,var(--rose-500),var(--rose-600));color:#fff;border-radius:16px;padding:14px 28px;
  box-shadow:0 16px 38px rgba(228,18,82,.3);opacity:0;}
#wdi-ux-page .piw-stage.go .piw-out{opacity:1;transition:opacity .7s ease 1.1s;}
#wdi-ux-page .piw-out-k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);}
#wdi-ux-page .piw-out-t{font-size:16px;font-weight:600;letter-spacing:-0.02em;}

/* note + cta */
#wdi-ux-page .piw-note{max-width:60ch;margin:clamp(30px,3.4vw,44px) auto 0;text-align:center;font-size:15px;font-weight:300;line-height:1.6;color:var(--muted);}
#wdi-ux-page .piw-cta{margin-top:26px;display:flex;justify-content:center;}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .piw-track path{stroke-dashoffset:0;animation:none;}
  #wdi-ux-page .piw-track-under path,#wdi-ux-page .piw-junc,#wdi-ux-page .piw-dots,#wdi-ux-page .piw-chip,#wdi-ux-page .piw-core,#wdi-ux-page .piw-out{opacity:1;transform:translate(-50%,-50%);scale:1;}
  #wdi-ux-page .piw-core-ring{animation:none;}
  #wdi-ux-page .piw-stage.go .piw-core-pill{animation:none;}
}

/* ============================================================
   9.5 · AI + HUMAN CONTROL - sticky header + numbered cards (GitBook-style)
   ============================================================ */
#wdi-ux-page .lp-gov{background:#fff;}
#wdi-ux-page .lp-gov-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(44px,7vw,120px);align-items:start;}
#wdi-ux-page .lp-gov-l{position:sticky;top:104px;}
#wdi-ux-page .lp-gov-l .lp-h{text-align:left;margin-top:18px;}
#wdi-ux-page .lp-gov-l .lp-aeo{margin-top:22px;}
#wdi-ux-page .lp-gov-l .lp-supp{margin-top:18px;}
#wdi-ux-page .lp-gov-cta{margin-top:30px;}
/* cards column */
#wdi-ux-page .lp-gov-r{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);}
#wdi-ux-page .lp-gov-card{display:flex;gap:clamp(24px,3vw,44px);align-items:flex-start;padding:clamp(30px,3.4vw,44px) 4px;
  position:relative;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-gov-card.in{opacity:1;transform:none;}
#wdi-ux-page .lp-gov-card::before{content:"";position:absolute;left:0;top:-1px;height:calc(100% + 1px);width:2px;background:linear-gradient(180deg,var(--rose-500),var(--violet-2));transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-gov-card:hover::before{transform:scaleY(1);}
#wdi-ux-page .lp-gov-n{flex:none;font-size:clamp(40px,3.6vw,52px);font-weight:300;letter-spacing:-0.03em;line-height:.9;color:var(--rose-500);font-feature-settings:"tnum" 1;transition:transform .4s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-gov-card:hover .lp-gov-n{transform:translateX(3px);}
#wdi-ux-page .lp-gov-c{padding-top:6px;}
#wdi-ux-page .lp-gov-c h3{font-size:clamp(19px,1.7vw,23px);font-weight:600;letter-spacing:-0.025em;color:var(--ink);}
#wdi-ux-page .lp-gov-c p{margin-top:11px;font-size:15px;font-weight:300;line-height:1.62;color:var(--muted);max-width:54ch;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .lp-gov-card{opacity:1;transform:none;}}

/* ============================================================
   9.25 · AI vs WDI COMPARISON - animated table
   ============================================================ */
#wdi-ux-page .lp-cmp{background:var(--bg-2);}
#wdi-ux-page .lp-cmp-table{--cat:1fr;--col:1.42fr;max-width:1160px;margin:0 auto;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(11,12,14,.04),0 24px 60px -46px rgba(11,12,14,.26);}
/* header row */
#wdi-ux-page .lp-cmp-headrow,#wdi-ux-page .lp-cmp-row{display:grid;grid-template-columns:var(--cat) var(--col) var(--col);}
#wdi-ux-page .lp-cmp-headrow{border-bottom:1px solid var(--line);background:var(--bg-2);}
#wdi-ux-page .lp-cmp-cat-h,#wdi-ux-page .lp-cmp-col-h{padding:18px 24px;font-size:13px;font-weight:700;letter-spacing:.03em;display:flex;align-items:center;gap:9px;}
#wdi-ux-page .lp-cmp-cat-h{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;}
#wdi-ux-page .lp-cmp-col-h.ai{color:var(--ink-2);}
#wdi-ux-page .lp-cmp-col-h.ai .dot{width:9px;height:9px;border-radius:50%;background:#D9A400;box-shadow:0 0 0 4px rgba(217,164,0,.14);}
#wdi-ux-page .lp-cmp-col-h.wdi{color:var(--rose-600);background:rgba(249,47,100,.045);position:relative;border-left:1px solid rgba(249,47,100,.14);}
#wdi-ux-page .lp-cmp-col-h.wdi .mark{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--rose-500);color:#fff;}
#wdi-ux-page .lp-cmp-col-h.wdi .mark svg{width:12px;height:12px;}
/* rows */
#wdi-ux-page .lp-cmp-row{border-top:1px solid var(--line);opacity:0;transform:translateX(60px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.75,.2,1);}
#wdi-ux-page .lp-cmp-row:first-of-type{border-top:none;}
#wdi-ux-page .lp-cmp-row.in{opacity:1;transform:none;}
#wdi-ux-page .lp-cmp-row:hover{background:var(--bg-2);}
#wdi-ux-page .lp-cmp-cat{display:flex;align-items:baseline;gap:14px;padding:24px 26px;font-size:clamp(15px,1.15vw,17px);font-weight:500;letter-spacing:-0.015em;color:var(--ink);}
#wdi-ux-page .lp-cmp-cat-n{font-size:12px;font-weight:600;color:var(--faint);font-feature-settings:"tnum" 1;min-width:18px;}
#wdi-ux-page .lp-cmp-cell{display:flex;gap:12px;padding:24px 26px;border-left:1px solid var(--line);align-items:flex-start;}
#wdi-ux-page .lp-cmp-cell .ic{flex:none;width:20px;height:20px;display:grid;place-items:center;margin-top:1px;}
#wdi-ux-page .lp-cmp-cell .ic svg{width:17px;height:17px;}
#wdi-ux-page .lp-cmp-cell.ai .ic{color:#D9A400;}
#wdi-ux-page .lp-cmp-cell.ai p{color:var(--muted);}
#wdi-ux-page .lp-cmp-cell.wdi{background:rgba(249,47,100,.028);border-left:1px solid rgba(249,47,100,.14);}
#wdi-ux-page .lp-cmp-cell.wdi .ic{color:var(--rose-600);}
#wdi-ux-page .lp-cmp-cell.wdi p{color:var(--ink-2);}
#wdi-ux-page .lp-cmp-cell p{margin:0;font-size:14px;font-weight:300;line-height:1.55;letter-spacing:-0.005em;color:var(--muted);}
#wdi-ux-page .lp-cmp-row:hover .lp-cmp-cell.wdi{background:rgba(249,47,100,.05);}
/* cta strip */
#wdi-ux-page .lp-cmp-cta{width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(40px,5vw,64px);display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,72px);flex-wrap:wrap;
  background:#08090B;color:#fff;border-radius:0;padding:clamp(52px,6vw,84px) clamp(28px,6vw,64px);position:relative;overflow:hidden;isolation:isolate;}
#wdi-ux-page .lp-cmp-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 130% at 100% 0%,rgba(249,47,100,.24),transparent 58%);}
#wdi-ux-page .lp-cmp-cta-l{position:relative;z-index:1;flex:0 1 620px;}
#wdi-ux-page .lp-cmp-cta-l h3{font-size:clamp(19px,1.9vw,25px);font-weight:600;letter-spacing:-0.025em;line-height:1.15;color:#fff;max-width:30ch;}
#wdi-ux-page .lp-cmp-cta-l p{margin-top:10px;font-size:14.5px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.64);max-width:52ch;}
#wdi-ux-page .lp-cmp-cta .lp-btn{position:relative;z-index:1;flex:none;}
#wdi-ux-page .lp-cmp-cta .lp-btn-primary{border:1.5px solid rgba(255,255,255,.85);}
#wdi-ux-page .lp-cmp-cta .lp-btn-primary:hover{border-color:var(--rose-500);}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .lp-cmp-row{opacity:1;transform:none;}}

/* ============================================================
   4 · SOLUTION PILLARS
   ============================================================ */
#wdi-ux-page .lp-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
#wdi-ux-page .lp-pillar{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px 28px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;}
#wdi-ux-page .lp-pillar::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--rose-500),var(--violet));transition:width .5s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-pillar:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 20px 46px rgba(11,12,14,.09);}
#wdi-ux-page .lp-pillar:hover::before{width:100%;}
#wdi-ux-page .lp-pillar.span2{grid-column:span 2;}
#wdi-ux-page .lp-pillar-n{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--rose-500);font-feature-settings:"tnum" 1;}
#wdi-ux-page .lp-pillar h3{margin-top:16px;font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
#wdi-ux-page .lp-pillar p{margin-top:12px;font-size:15px;font-weight:300;line-height:1.6;color:var(--muted);}

/* --- problem-row subtext (always visible) + define-direction CTA --- */
#wdi-ux-page .lp-prob-c{display:flex;flex-direction:column;gap:10px;min-width:0;}
#wdi-ux-page .lp-prob-sub{font-size:14px;font-weight:300;line-height:1.6;color:var(--muted);letter-spacing:-0.004em;}
#wdi-ux-page .lp-prob-solve{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--font);font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:#fff;background:var(--rose-500);
  border-radius:999px;text-decoration:none;overflow:hidden;white-space:nowrap;
  max-height:0;padding:0 16px;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:max-height .42s cubic-bezier(.2,.7,.2,1),opacity .32s ease,transform .42s cubic-bezier(.2,.7,.2,1),padding .32s,margin-top .42s,background .3s;}
#wdi-ux-page .lp-prob-solve svg{width:15px;height:15px;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-prob.in:hover .lp-prob-solve,#wdi-ux-page .lp-prob:focus-within .lp-prob-solve{max-height:52px;opacity:1;transform:none;pointer-events:auto;margin-top:6px;padding:10px 17px;}
#wdi-ux-page .lp-prob-solve:hover{background:var(--rose-600);}
#wdi-ux-page .lp-prob-solve:hover svg{transform:translateX(3px);}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .lp-prob-solve{transition:opacity .2s ease;}}
#wdi-ux-page .lp-prob-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:56px;}
#wdi-ux-page .lp-prob-cta-wrap .lp-prob-close{margin:0;}
#wdi-ux-page .lp-prob-cta span:first-child{white-space:normal;}

/* ============================================================
   4 · SOLUTION - editorial big-text rows + stock imagery (dark)
   ============================================================ */
#wdi-ux-page .lp-sol{background:#08090B;color:#fff;position:relative;isolation:isolate;overflow:hidden;}
#wdi-ux-page .lp-sol .wrap{position:relative;z-index:2;}
#wdi-ux-page .lp-sol .lp-h{color:#fff;}
#wdi-ux-page .lp-sol::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;
  mask-image:radial-gradient(80% 60% at 50% 30%,#000,transparent 82%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 30%,#000,transparent 82%);opacity:.6;}
#wdi-ux-page .lp-sol::after{content:"";position:absolute;z-index:0;pointer-events:none;width:56%;height:70%;top:-8%;right:-6%;
  background:radial-gradient(ellipse at center,rgba(228,18,82,.16),rgba(122,0,255,.1) 44%,transparent 70%);
  animation:lpSolAura 20s ease-in-out infinite;}
@keyframes lpSolAura{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.08);opacity:1;}}
#wdi-ux-page .lp-btn-ondark{background:#fff;color:var(--ink);border-color:#fff;}
#wdi-ux-page .lp-btn-ondark:hover{background:var(--rose-500);color:#fff;border-color:var(--rose-500);
  box-shadow:0 18px 40px rgba(228,18,82,.34);transform:translateY(-2px);}

/* editorial head - big text left, supporting paragraph right */
#wdi-ux-page .lp-sol-head2{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,5vw,64px);align-items:end;
  margin-bottom:clamp(38px,4.6vw,58px);}
#wdi-ux-page .lp-sol-head2 .lp-h{margin-top:18px;text-align:left;}
#wdi-ux-page .lp-sol-head2-p{font-size:clamp(15px,1.3vw,17px);font-weight:300;line-height:1.62;color:rgba(255,255,255,.6);max-width:46ch;padding-bottom:6px;}

/* rows */
#wdi-ux-page .lp-solr-rows{margin-top:clamp(18px,2.6vw,30px);border-top:1px solid rgba(255,255,255,.1);}
#wdi-ux-page .lp-solr{position:relative;border-bottom:1px solid rgba(255,255,255,.1);overflow:hidden;}
#wdi-ux-page .lp-solr-main{transform:translateY(102%);transition:transform .85s cubic-bezier(.4,0,.15,1);}
#wdi-ux-page .lp-solr.in .lp-solr-main{transform:translateY(0);}
#wdi-ux-page .lp-solr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;z-index:1;
  background:linear-gradient(180deg,var(--rose-500),var(--violet-2));transition:width .4s ease;}
#wdi-ux-page .lp-solr:hover::before{width:3px;}
#wdi-ux-page .lp-solr-main{display:grid;grid-template-columns:minmax(0,300px) 1fr 300px;gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(28px,3.4vw,44px) 0 clamp(28px,3.4vw,44px) clamp(4px,2vw,28px);}
#wdi-ux-page .lp-solr-l{display:flex;align-items:flex-start;gap:16px;}
#wdi-ux-page .lp-solr-idx{font-size:14px;font-weight:600;color:rgba(255,255,255,.3);font-feature-settings:"tnum" 1;margin-top:9px;transition:color .35s;}
#wdi-ux-page .lp-solr:hover .lp-solr-idx{color:var(--rose-400);}
#wdi-ux-page .lp-solr-tag{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-400);margin-bottom:9px;}
#wdi-ux-page .lp-solr-name{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-0.03em;line-height:1.02;color:#fff;transition:color .35s;}
#wdi-ux-page .lp-solr:hover .lp-solr-name{color:var(--rose-300);}
#wdi-ux-page .lp-solr-mid{min-width:0;}
#wdi-ux-page .lp-solr-desc{margin:0;font-size:15.5px;font-weight:300;line-height:1.62;color:rgba(255,255,255,.62);max-width:52ch;}
#wdi-ux-page .lp-solr-subs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
#wdi-ux-page .lp-solr-subs i{font-style:normal;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 14px;
  transition:border-color .25s,color .25s;}
#wdi-ux-page .lp-solr:hover .lp-solr-subs i{border-color:rgba(255,255,255,.22);color:#fff;}
#wdi-ux-page .lp-solr-thumb{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#0A0B0E;border:1px solid rgba(255,255,255,.1);}
#wdi-ux-page .lp-solr-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) brightness(.6);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s;}
#wdi-ux-page .lp-solr:hover .lp-solr-thumb img{transform:scale(1.06);filter:saturate(1.02) brightness(.74);}
#wdi-ux-page .lp-solr-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(150deg,rgba(8,9,11,.32) 20%,rgba(8,9,11,.72));}
#wdi-ux-page .lp-solr-step{position:absolute;left:14px;bottom:12px;z-index:1;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#fff;
  background:rgba(11,12,14,.5);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;backdrop-filter:blur(6px);}
@media (prefers-reduced-motion:reduce){#wdi-ux-page .lp-solr-main{transform:none;transition:none;}}

/* ============================================================
   5 · PRODUCT PATHS
   ============================================================ */
#wdi-ux-page .lp-path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
#wdi-ux-page .lp-path{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 28px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .4s;}
#wdi-ux-page .lp-sec:not(.alt) .lp-path{background:var(--bg-2);}
#wdi-ux-page .lp-path::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(90% 80% at 100% 0%,rgba(249,47,100,.09),transparent 60%);transition:opacity .4s;}
#wdi-ux-page .lp-path:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 26px 56px rgba(11,12,14,.1);}
#wdi-ux-page .lp-path:hover::after{opacity:1;}
#wdi-ux-page .lp-path-ic{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(150deg,rgba(249,47,100,.12),rgba(122,0,255,.10));color:var(--rose-600);}
#wdi-ux-page .lp-path-ic svg{width:24px;height:24px;}
#wdi-ux-page .lp-path h3{margin-top:20px;font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
#wdi-ux-page .lp-path p{margin-top:10px;font-size:14.5px;font-weight:300;line-height:1.58;color:var(--muted);}
#wdi-ux-page .lp-path-svcs{margin-top:0;max-height:0;opacity:0;overflow:hidden;display:flex;flex-wrap:wrap;gap:7px;
  transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease,margin-top .45s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-path:hover .lp-path-svcs,#wdi-ux-page .lp-path:focus-within .lp-path-svcs{margin-top:18px;max-height:220px;opacity:1;}
#wdi-ux-page .lp-path-svcs span{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--page);border:1px solid var(--line);border-radius:999px;padding:5px 11px;}
#wdi-ux-page .lp-sec.alt .lp-path-svcs span{background:var(--bg-2);}
#wdi-ux-page .lp-path-go{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;transition:gap .3s,color .3s;}
#wdi-ux-page .lp-path-go svg{width:17px;height:17px;color:var(--rose-500);transition:transform .3s;}
#wdi-ux-page .lp-path:hover .lp-path-go{color:var(--rose-600);}
#wdi-ux-page .lp-path:hover .lp-path-go svg{transform:translate(3px,-3px);}

/* AI card - quick AI-gradient flash on hover */
#wdi-ux-page .lp-path-ai::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(125deg,rgba(122,0,255,.22),rgba(162,75,255,.14) 42%,rgba(0,190,255,.12) 74%,transparent);
  mix-blend-mode:normal;}
#wdi-ux-page .lp-path-ai:hover::before{animation:lpAiFlash 1.05s cubic-bezier(.3,.7,.2,1) forwards;}
@keyframes lpAiFlash{0%{opacity:0;}22%{opacity:1;}55%{opacity:.5;}100%{opacity:0;}}
/* sheen sweep synced with the flash */
#wdi-ux-page .lp-path-ai::after{background:linear-gradient(115deg,transparent 30%,rgba(162,75,255,.35) 50%,transparent 70%)!important;
  background-size:220% 100%!important;background-position:120% 0!important;}
#wdi-ux-page .lp-path-ai:hover::after{opacity:1;animation:lpAiSheen 1.05s cubic-bezier(.3,.7,.2,1) forwards;}
@keyframes lpAiSheen{0%{background-position:120% 0;opacity:0;}25%{opacity:1;}100%{background-position:-40% 0;opacity:0;}}
#wdi-ux-page .lp-path-ai{position:relative;}
#wdi-ux-page .lp-path-ai:hover{border-color:var(--violet-2);box-shadow:0 26px 56px rgba(122,0,255,.16);}
#wdi-ux-page .lp-path-ai > *{position:relative;z-index:2;}
#wdi-ux-page .lp-path-ai .lp-path-ic{background:linear-gradient(150deg,rgba(122,0,255,.16),rgba(162,75,255,.12));color:var(--violet);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;}
#wdi-ux-page .lp-path-ai:hover .lp-path-ic{transform:scale(1.08) rotate(-4deg);box-shadow:0 0 0 5px rgba(122,0,255,.12),0 10px 26px rgba(122,0,255,.3);}
#wdi-ux-page .lp-path-ai:hover .lp-path-go{color:var(--violet);}
#wdi-ux-page .lp-path-ai:hover .lp-path-go svg{color:var(--violet-2);}

/* ============================================================
   6 · WHY WDI - premium bento (light)
   ============================================================ */
#wdi-ux-page .lp-why{background:#08090B;color:#fff;position:relative;isolation:isolate;overflow:hidden;}
#wdi-ux-page .lp-why .wrap{position:relative;z-index:2;}
#wdi-ux-page .lp-why::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(78% 62% at 50% 38%,#000,transparent 82%);
  -webkit-mask-image:radial-gradient(78% 62% at 50% 38%,#000,transparent 82%);}
#wdi-ux-page .lp-why::after{content:"";position:absolute;top:-16%;right:-8%;width:52%;height:70%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(228,18,82,.16),transparent 64%);animation:lpSolAura 20s ease-in-out infinite;}
#wdi-ux-page .lp-why .lp-h{color:#fff;}
#wdi-ux-page .lp-why .lp-aeo{color:rgba(255,255,255,.62);}
#wdi-ux-page .lp-wy-head{margin-bottom:clamp(34px,3.6vw,48px);}
/* stats strip */
#wdi-ux-page .lp-wy-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;margin:0 auto clamp(30px,3.4vw,46px);}
#wdi-ux-page .lp-wy-stat{text-align:center;position:relative;}
#wdi-ux-page .lp-wy-stat + .lp-wy-stat::before{content:"";position:absolute;left:-7px;top:14%;height:56%;width:1px;background:rgba(255,255,255,.12);}
#wdi-ux-page .lp-wy-stat b{font-size:clamp(36px,4.2vw,56px);font-weight:600;letter-spacing:-0.045em;font-feature-settings:"tnum" 1;color:#fff;}
#wdi-ux-page .lp-wy-stat i{font-style:normal;font-size:clamp(22px,2.4vw,32px);font-weight:600;letter-spacing:-0.02em;color:var(--rose-400);}
#wdi-ux-page .lp-wy-stat span{display:block;margin-top:7px;font-size:13px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:-0.01em;}

/* Netflix-style preview rail */
#wdi-ux-page .lp-wy-rail-wrap{position:relative;}
#wdi-ux-page .lp-wy-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 20px;
  -ms-overflow-style:none;scrollbar-width:none;cursor:grab;}
#wdi-ux-page .lp-wy-rail::-webkit-scrollbar{display:none;}
#wdi-ux-page .lp-wy-rail:active{cursor:grabbing;}
#wdi-ux-page .lp-wy-card{flex:0 0 340px;scroll-snap-align:start;position:relative;background:#121318;border:1px solid rgba(255,255,255,.1);
  border-radius:24px;padding:28px 28px 30px;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s,background .4s;}
#wdi-ux-page .lp-wy-card::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--rose-500),var(--violet-2));transition:width .5s cubic-bezier(.3,.7,.2,1);}
#wdi-ux-page .lp-wy-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);background:#17181e;box-shadow:0 26px 56px rgba(0,0,0,.5);}
#wdi-ux-page .lp-wy-card:hover::after{width:100%;}
#wdi-ux-page .lp-wy-card-top{display:flex;align-items:center;justify-content:space-between;}
#wdi-ux-page .lp-wy-card-ic{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),background .4s,color .4s;}
#wdi-ux-page .lp-wy-card-ic svg{width:26px;height:26px;}
#wdi-ux-page .lp-wy-card:hover .lp-wy-card-ic{transform:scale(1.06) rotate(-4deg);background:#fff;color:var(--ink);}
#wdi-ux-page .lp-wy-card-n{font-size:13px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.22);font-feature-settings:"tnum" 1;transition:color .4s;}
#wdi-ux-page .lp-wy-card:hover .lp-wy-card-n{color:var(--rose-400);}
#wdi-ux-page .lp-wy-card-body h3{margin-top:22px;font-size:19px;font-weight:600;letter-spacing:-0.02em;color:#fff;}
#wdi-ux-page .lp-wy-card-body p{margin-top:11px;font-size:14.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.6);}
#wdi-ux-page .lp-wy-card-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;}
#wdi-ux-page .lp-wy-card-chips span{font-size:12px;font-weight:500;color:rgba(255,255,255,.72);padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);}
/* rail nav */
#wdi-ux-page .lp-wy-rail-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:6px;}
#wdi-ux-page .lp-wy-arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;
  transition:border-color .3s,background .3s,transform .3s,box-shadow .3s,opacity .3s;}
#wdi-ux-page .lp-wy-arrow svg{width:18px;height:18px;}
#wdi-ux-page .lp-wy-arrow:hover{border-color:#fff;background:rgba(255,255,255,.12);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.4);}
#wdi-ux-page .lp-wy-arrow:disabled{opacity:.28;cursor:default;transform:none;box-shadow:none;border-color:rgba(255,255,255,.1);}
/* foot CTA */
#wdi-ux-page .lp-wy-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(34px,3.6vw,46px);padding-top:clamp(30px,3vw,40px);border-top:1px solid rgba(255,255,255,.1);}
#wdi-ux-page .lp-wy-foot p{font-size:clamp(19px,2vw,26px);font-weight:500;letter-spacing:-0.025em;color:#fff;max-width:20ch;}
#wdi-ux-page .lp-wy-foot .lp-btn{flex:none;}
#wdi-ux-page .lp-wy-foot .lp-btn-primary{background:var(--rose-500);color:#fff;border:1.5px solid var(--rose-500);}
#wdi-ux-page .lp-wy-foot .lp-btn-primary:hover{background:#fff;color:var(--rose-600);border-color:#fff;}

/* in-page portfolio closing line (v2) */
#wdi-ux-page .lp-pfd-line{max-width:1300px;margin:clamp(30px,3.4vw,44px) auto 0;padding:0 40px;text-align:center;
  font-size:clamp(19px,2vw,27px);font-weight:500;letter-spacing:-0.025em;line-height:1.3;color:#fff;text-wrap:balance;}
#wdi-ux-page .lp-pfd-line b{font-weight:600;background:linear-gradient(110deg,var(--rose-400),var(--violet-2));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* engagement recommended tag (v2) */
#wdi-ux-page .lp-eng-rec{border-color:var(--rose-300) !important;box-shadow:0 0 0 1px var(--rose-300),0 22px 50px rgba(228,18,82,.12);}
#wdi-ux-page .lp-eng-rec:hover{box-shadow:0 0 0 1px var(--rose-400),0 30px 60px rgba(228,18,82,.2) !important;}
#wdi-ux-page .lp-eng-badge{position:absolute;top:18px;right:20px;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:linear-gradient(120deg,var(--rose-500),var(--violet));border-radius:999px;padding:6px 12px;
  box-shadow:0 6px 16px rgba(228,18,82,.34);}
#wdi-ux-page .lp-eng-badge svg{width:12px;height:12px;}

/* ============================================================
   7 · PROCESS - process columns w/ hover imagery (YLLW-style)
   ============================================================ */
#wdi-ux-page .lp-process{position:relative;isolation:isolate;overflow:hidden;}
#wdi-ux-page .lp-process .wrap{position:relative;z-index:1;}
#wdi-ux-page .lp-process::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(15,17,20,.045) 1px,transparent 1px);background-size:28px 28px;
  mask-image:radial-gradient(78% 66% at 50% 40%,#000,transparent 82%);
  -webkit-mask-image:radial-gradient(78% 66% at 50% 40%,#000,transparent 82%);}
#wdi-ux-page .lp-process::after{content:"";position:absolute;z-index:0;pointer-events:none;width:56%;height:64%;top:-6%;right:-8%;
  background:radial-gradient(ellipse at center,rgba(228,18,82,.1),rgba(122,0,255,.06) 46%,transparent 72%);
  animation:lpSolAura 22s ease-in-out infinite;}
#wdi-ux-page .lp-proc-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);overflow:hidden;}
#wdi-ux-page .lp-pcol{position:relative;isolation:isolate;background:var(--bg);min-height:clamp(400px,34vw,470px);
  display:flex;flex-direction:column;padding:26px 20px;overflow:hidden;transition:background .5s;}
#wdi-ux-page .lp-sec:not(.alt) .lp-pcol{background:var(--bg-2);}
#wdi-ux-page .lp-pcol::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:linear-gradient(90deg,var(--rose-500),var(--violet-2));transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-pcol:hover::after,#wdi-ux-page .lp-pcol.is-active::after{transform:scaleX(1);}
#wdi-ux-page .lp-pcol-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);filter:brightness(.6) saturate(1.04);
  transition:opacity .7s ease,transform 2.2s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-pcol-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(180deg,rgba(8,9,11,.12),rgba(8,9,11,.7));}
#wdi-ux-page .lp-pcol:hover .lp-pcol-img,#wdi-ux-page .lp-pcol.is-active .lp-pcol-img{opacity:1;transform:scale(1);}
#wdi-ux-page .lp-pcol:hover .lp-pcol-scrim,#wdi-ux-page .lp-pcol.is-active .lp-pcol-scrim{opacity:1;}
#wdi-ux-page .lp-pcol-body{position:relative;z-index:2;}
#wdi-ux-page .lp-pcol-badge{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-size:13px;font-weight:600;font-feature-settings:"tnum" 1;
  transition:background .45s,color .45s,box-shadow .45s;}
#wdi-ux-page .lp-pcol:hover .lp-pcol-badge,#wdi-ux-page .lp-pcol.is-active .lp-pcol-badge{background:var(--rose-500);color:#fff;box-shadow:0 6px 18px rgba(228,18,82,.45);}
#wdi-ux-page .lp-pcol-title{margin-top:22px;font-size:clamp(17px,1.35vw,22px);font-weight:600;letter-spacing:-0.03em;
  line-height:1.12;color:var(--ink);text-wrap:balance;transition:color .45s;}
#wdi-ux-page .lp-pcol:hover .lp-pcol-title,#wdi-ux-page .lp-pcol.is-active .lp-pcol-title{color:#fff;}
#wdi-ux-page .lp-pcol-more{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
  color:#fff;text-decoration:none;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),gap .3s;}
#wdi-ux-page .lp-pcol-more svg{width:15px;height:15px;}
#wdi-ux-page .lp-pcol:hover .lp-pcol-more,#wdi-ux-page .lp-pcol.is-active .lp-pcol-more{opacity:1;transform:translateY(0);pointer-events:auto;}
#wdi-ux-page .lp-pcol-more:hover{gap:12px;}
/* tags pinned to the bottom */
#wdi-ux-page .lp-pcol-tags{position:relative;z-index:2;margin-top:auto;padding-top:24px;}
#wdi-ux-page .lp-pcol-tags span{display:block;font-size:12.5px;font-weight:500;letter-spacing:-0.005em;color:var(--ink-2);
  padding:11px 0;border-top:1px solid var(--line);transition:color .45s,border-color .45s;}
#wdi-ux-page .lp-pcol:hover .lp-pcol-tags span,#wdi-ux-page .lp-pcol.is-active .lp-pcol-tags span{color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.22);}
/* footer line */
#wdi-ux-page .lp-proc-foot{margin-top:clamp(26px,3vw,38px);display:flex;justify-content:center;align-items:center;gap:12px;
  flex-wrap:wrap;text-align:center;font-size:15px;font-weight:300;color:var(--muted);}
#wdi-ux-page .lp-proc-flink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;
  letter-spacing:-0.01em;transition:gap .3s,color .3s;}
#wdi-ux-page .lp-proc-flink svg{width:16px;height:16px;color:var(--rose-500);}
#wdi-ux-page .lp-proc-flink:hover{color:var(--rose-600);gap:12px;}

/* ============================================================
   8 · OUTCOMES
   ============================================================ */
#wdi-ux-page .lp-out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
#wdi-ux-page .lp-out{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 28px;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;}
#wdi-ux-page .lp-out:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 20px 46px rgba(11,12,14,.08);}
#wdi-ux-page .lp-out-check{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--rose-soft);color:var(--rose-600);}
#wdi-ux-page .lp-out-check svg{width:20px;height:20px;}
#wdi-ux-page .lp-out h3{margin-top:18px;font-size:18px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
#wdi-ux-page .lp-out p{margin-top:10px;font-size:14.5px;font-weight:300;line-height:1.6;color:var(--muted);}

/* ============================================================
   9 · PORTFOLIO PROOF (dark band extension)
   ============================================================ */
#wdi-ux-page .lp-proof .pp-band-in{max-width:1060px;}
#wdi-ux-page .lp-proof-cats{margin:40px auto 8px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:880px;}
#wdi-ux-page .lp-proof-cats span{font-size:13.5px;font-weight:500;letter-spacing:-0.01em;color:rgba(255,255,255,.82);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 16px;transition:background .3s,border-color .3s,transform .3s;}
#wdi-ux-page .lp-proof-cats span:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);transform:translateY(-2px);}
#wdi-ux-page .lp-proof .ct-band-cta{margin-top:38px;}

/* ============================================================
   TEAM (v2) - Titan-style cards, + reveals contact
   ============================================================ */
#wdi-ux-page .lp-sec.lp-team{background:#F4F5F7;}
#wdi-ux-page .lp-team-head{max-width:840px;margin:0 0 clamp(38px,4.5vw,58px);text-align:left;}#wdi-ux-page .lp-team-head .lp-eyebrow{justify-content:flex-start;}
#wdi-ux-page .lp-team-head .lp-h{text-align:left;margin-top:16px;}
#wdi-ux-page .lp-team-head .lp-aeo,#wdi-ux-page .lp-team-head .lp-supp{text-align:left;margin-left:0;margin-right:0;}
#wdi-ux-page .lp-team-head .lp-h b{font-weight:600;}
#wdi-ux-page .lp-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);}
#wdi-ux-page .lp-tm{display:flex;flex-direction:column;}
#wdi-ux-page .lp-tm-top{margin-bottom:22px;}
#wdi-ux-page .lp-tm-name{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-0.03em;line-height:1.02;color:var(--ink);}
#wdi-ux-page .lp-tm-role{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:ui-monospace,"SF Mono",Menlo,monospace;}
#wdi-ux-page .lp-tm-photo{position:relative;aspect-ratio:1/1.08;border-radius:20px;overflow:hidden;background:var(--page);isolation:isolate;}
#wdi-ux-page .lp-tm-photo image-slot{display:block;width:100%;height:100%;}
#wdi-ux-page .lp-tm-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* + button */
#wdi-ux-page .lp-tm-plus{position:absolute;top:16px;right:16px;z-index:3;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;box-shadow:0 6px 18px rgba(11,12,14,.14);display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s;}
#wdi-ux-page .lp-tm-plus .ic{position:relative;width:15px;height:15px;}
#wdi-ux-page .lp-tm-plus .ic::before,#wdi-ux-page .lp-tm-plus .ic::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);border-radius:2px;transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s;}
#wdi-ux-page .lp-tm-plus .ic::before{width:15px;height:1.8px;transform:translate(-50%,-50%);}
#wdi-ux-page .lp-tm-plus .ic::after{width:1.8px;height:15px;transform:translate(-50%,-50%);}
#wdi-ux-page .lp-tm-plus:hover{transform:scale(1.06);}
#wdi-ux-page .lp-tm.open .lp-tm-plus{background:var(--rose-500);}
#wdi-ux-page .lp-tm.open .lp-tm-plus .ic::before,#wdi-ux-page .lp-tm.open .lp-tm-plus .ic::after{background:#fff;}
#wdi-ux-page .lp-tm.open .lp-tm-plus .ic::before{transform:translate(-50%,-50%) rotate(45deg);}
#wdi-ux-page .lp-tm.open .lp-tm-plus .ic::after{transform:translate(-50%,-50%) rotate(45deg);opacity:0;}
/* contact overlay */
#wdi-ux-page .lp-tm-contact{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  padding:26px 24px;background:linear-gradient(180deg,rgba(11,12,14,.2),rgba(11,12,14,.86));
  opacity:0;pointer-events:none;transition:opacity .45s ease;}
#wdi-ux-page .lp-tm.open .lp-tm-contact{opacity:1;pointer-events:auto;}
#wdi-ux-page .lp-tm-ct-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-300);margin-bottom:12px;}
#wdi-ux-page .lp-tm-contact a{display:flex;flex-direction:column;gap:2px;padding:11px 0;border-top:1px solid rgba(255,255,255,.16);
  font-size:15px;font-weight:500;letter-spacing:-0.01em;color:#fff;text-decoration:none;transition:color .25s;}
#wdi-ux-page .lp-tm-contact a .k{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);}
#wdi-ux-page .lp-tm-contact a:hover{color:var(--rose-300);}
@media (prefers-reduced-motion:reduce){#wdi-ux-page .lp-tm-plus,#wdi-ux-page .lp-tm-plus .ic::before,#wdi-ux-page .lp-tm-plus .ic::after,#wdi-ux-page .lp-tm-contact{transition:none;}}

/* capability cards */
#wdi-ux-page .lp-team-intro{max-width:64ch;margin:clamp(48px,6vw,80px) auto clamp(28px,3vw,40px);text-align:center;font-size:clamp(16px,1.4vw,19px);font-weight:300;line-height:1.6;color:var(--ink-2);}
#wdi-ux-page .lp-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
#wdi-ux-page .lp-cap{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 26px;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s;}
#wdi-ux-page .lp-cap::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--rose-500),var(--violet-2));transition:width .5s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-cap:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 24px 52px rgba(11,12,14,.09);}
#wdi-ux-page .lp-cap:hover::before{width:100%;}
#wdi-ux-page .lp-cap-ic{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(150deg,rgba(249,47,100,.12),rgba(122,0,255,.1));color:var(--rose-600);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),background .4s,color .4s;}
#wdi-ux-page .lp-cap-ic svg{width:26px;height:26px;}
#wdi-ux-page .lp-cap:hover .lp-cap-ic{transform:scale(1.06) rotate(-4deg);background:var(--ink);color:#fff;}
#wdi-ux-page .lp-cap h3{margin-top:20px;font-size:18.5px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;color:var(--ink);}
#wdi-ux-page .lp-cap p{margin-top:11px;font-size:14px;font-weight:300;line-height:1.6;color:var(--muted);}
#wdi-ux-page .lp-cap-areas{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;}
#wdi-ux-page .lp-cap-areas span{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--page);border:1px solid var(--line);border-radius:999px;padding:6px 12px;transition:background .3s,border-color .3s;}
#wdi-ux-page .lp-cap:hover .lp-cap-areas span{background:#fff;border-color:var(--line-2);}

/* philosophy */
#wdi-ux-page .lp-team-phil{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;
  padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--line);}
#wdi-ux-page .lp-phil-l h3{margin-top:18px;font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);}
#wdi-ux-page .lp-phil-l p{margin-top:18px;font-size:15.5px;font-weight:300;line-height:1.62;color:var(--muted);max-width:52ch;}
#wdi-ux-page .lp-phil-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;padding-top:6px;}
#wdi-ux-page .lp-phil-list li{position:relative;padding-left:26px;font-size:15px;font-weight:500;letter-spacing:-0.01em;color:var(--ink);}
#wdi-ux-page .lp-phil-list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,var(--rose-500),var(--violet));}
#wdi-ux-page .lp-phil-list li::after{content:"";position:absolute;left:4.5px;top:10px;width:3.5px;height:6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);}

/* CTA */
#wdi-ux-page .lp-team-cta{width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(56px,7vw,90px);text-align:center;background:#08090B;color:#fff;border-radius:0;padding:clamp(66px,9vw,120px) clamp(28px,6vw,64px);position:relative;overflow:hidden;isolation:isolate;}
#wdi-ux-page .lp-team-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 80% at 50% 0%,rgba(249,47,100,.22),transparent 62%);}
#wdi-ux-page .lp-team-cta h3,#wdi-ux-page .lp-team-cta p,#wdi-ux-page .lp-team-cta-btns{position:relative;z-index:1;}
#wdi-ux-page .lp-team-cta h3{font-size:clamp(24px,2.8vw,38px);font-weight:600;letter-spacing:-0.03em;line-height:1.08;max-width:22ch;margin:0 auto;color:#fff;text-wrap:balance;}
#wdi-ux-page .lp-team-cta p{margin:18px auto 0;max-width:56ch;font-size:16px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.68);}
#wdi-ux-page .lp-team-cta-btns{margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .lp-team-cta-btns .lp-btn-primary{border:1.5px solid rgba(255,255,255,.85);}
#wdi-ux-page .lp-team-cta-btns .lp-btn-primary:hover{border-color:var(--rose-500);}
#wdi-ux-page .lp-team-cta-btns .lp-btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);}
#wdi-ux-page .lp-team-cta-btns .lp-btn-ghost:hover{border-color:var(--rose-400);color:var(--rose-300);}

/* ============================================================
   10 · AI OPPORTUNITY
   ============================================================ */
#wdi-ux-page .lp-ai{background:var(--bg);}
#wdi-ux-page .lp-ai-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 46% at 82% 10%,rgba(122,0,255,.05),transparent 64%);opacity:.7;}
#wdi-ux-page .lp-ai .wrap{position:relative;z-index:2;}
#wdi-ux-page .lp-eyebrow-ai{color:var(--violet);}
#wdi-ux-page .lp-eyebrow-ai .lvdot{background:var(--violet-2);animation:none;box-shadow:0 0 12px rgba(122,0,255,.6);}
/* Intercom add-on style cards */
#wdi-ux-page .lp-ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
#wdi-ux-page .lp-ai-card{position:relative;display:flex;flex-direction:column;background:#F6F5F1;border-radius:3px;
  padding:26px 24px 22px;min-height:236px;transition:background .4s,transform .45s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-ai-card::before,#wdi-ux-page .lp-ai-card::after{content:"";position:absolute;inset:0;pointer-events:none;}
#wdi-ux-page .lp-ai-card::before{
  background:
    linear-gradient(#B8B4A8,#B8B4A8) 0 0/13px 1px no-repeat,
    linear-gradient(#B8B4A8,#B8B4A8) 0 0/1px 13px no-repeat,
    linear-gradient(#B8B4A8,#B8B4A8) 100% 0/13px 1px no-repeat,
    linear-gradient(#B8B4A8,#B8B4A8) 100% 0/1px 13px no-repeat;}
#wdi-ux-page .lp-ai-card::after{
  background:
    linear-gradient(#B8B4A8,#B8B4A8) 0 100%/13px 1px no-repeat,
    linear-gradient(#B8B4A8,#B8B4A8) 0 100%/1px 13px no-repeat,
    linear-gradient(#B8B4A8,#B8B4A8) 100% 100%/13px 1px no-repeat,
    linear-gradient(#B8B4A8,#B8B4A8) 100% 100%/1px 13px no-repeat;}
#wdi-ux-page .lp-ai-card:hover{background:#F1EFE8;transform:translateY(-3px);}
#wdi-ux-page .lp-ai-card h3{font-size:19px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
#wdi-ux-page .lp-ai-card p{margin-top:12px;font-size:14px;font-weight:300;line-height:1.55;color:var(--muted);}
#wdi-ux-page .lp-ai-more{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink);align-self:flex-start;transition:color .3s,border-color .3s,gap .3s;}
#wdi-ux-page .lp-ai-more svg{width:14px;height:14px;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s;}
#wdi-ux-page .lp-ai-card:hover .lp-ai-more{color:var(--rose-600);border-color:var(--rose-600);gap:9px;}
#wdi-ux-page .lp-ai-card:hover .lp-ai-more svg{opacity:1;transform:none;}

/* ============================================================
   11 · ENGAGEMENT OPTIONS - plan-card layout (3 + 2)
   ============================================================ */
#wdi-ux-page .lp-engage-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
#wdi-ux-page .lp-eng{position:relative;display:flex;flex-direction:column;grid-column:span 2;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 28px 26px;
  min-height:clamp(230px,20vw,264px);text-decoration:none;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s;}
#wdi-ux-page .lp-eng:nth-child(4),#wdi-ux-page .lp-eng:nth-child(5){grid-column:span 3;}
#wdi-ux-page .lp-eng:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 26px 56px rgba(11,12,14,.1);}
#wdi-ux-page .lp-eng-t{font-size:clamp(20px,1.7vw,25px);font-weight:600;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);}
#wdi-ux-page .lp-eng-meta{margin-top:10px;font-size:14.5px;font-weight:500;letter-spacing:-0.01em;color:var(--rose-600);}
#wdi-ux-page .lp-eng-d{margin-top:16px;font-size:14px;font-weight:300;line-height:1.55;color:var(--muted);max-width:52ch;padding-right:40px;}
#wdi-ux-page .lp-eng-inc{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;font-weight:400;line-height:1.5;color:var(--ink-2);}
#wdi-ux-page .lp-eng-inc-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-600);margin-bottom:6px;}
#wdi-ux-page .lp-eng-ar{margin-top:auto;align-self:flex-start;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink);border:1px solid var(--line-2);margin-top:22px;
  transition:background .35s,color .35s,border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .lp-eng-ar svg{width:17px;height:17px;}
#wdi-ux-page .lp-eng:hover .lp-eng-ar{background:var(--rose-500);border-color:var(--rose-500);color:#fff;transform:translateX(4px);box-shadow:0 10px 24px rgba(228,18,82,.32);}

/* ============================================================
   13 · FAQ (reuses faq.css .fqa- classes)
   ============================================================ */
#wdi-ux-page .lp-faq{background:var(--bg);}

/* ============================================================
   14 · FINAL CTA (dark)
   ============================================================ */
#wdi-ux-page .lp-final{position:relative;padding:clamp(90px,11vw,150px) 0;background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;overflow:hidden;text-align:center;}
#wdi-ux-page .lp-final-aura{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(42% 60% at 22% 26%,rgba(249,47,100,.2),transparent 60%),radial-gradient(42% 60% at 80% 74%,rgba(122,0,255,.2),transparent 62%);
  filter:blur(14px);animation:lpFinalGlow 14s ease-in-out infinite alternate;}
@keyframes lpFinalGlow{from{transform:translateX(-3%);}to{transform:translateX(3%);}}
#wdi-ux-page .lp-final-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:58px 58px;mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);}
#wdi-ux-page .lp-final-in{position:relative;z-index:2;max-width:900px;margin:0 auto;}
#wdi-ux-page .lp-eyebrow-dark{color:var(--rose-300);}
#wdi-ux-page .lp-final-h{margin-top:22px;font-size:clamp(32px,5vw,64px);font-weight:600;letter-spacing:-0.04em;line-height:1.02;color:#fff;text-wrap:balance;}
#wdi-ux-page .lp-final-h em{font-style:normal;background:linear-gradient(110deg,var(--rose-400),var(--violet-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .lp-final-p{margin:24px auto 0;max-width:60ch;font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.74);}
#wdi-ux-page .lp-final-cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .lp-final-sub{margin:22px auto 0;display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;letter-spacing:-0.01em;
  color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;transition:color .3s,border-color .3s;}
#wdi-ux-page .lp-final-sub:hover{color:var(--rose-300);border-color:var(--rose-400);}
#wdi-ux-page .lp-final-close{margin-top:34px;font-size:14px;font-weight:300;color:rgba(255,255,255,.5);letter-spacing:.01em;}

/* ============================================================
   FORM (landing) - kill fixed height + internal scroll, no cutoff
   ============================================================ */
#wdi-ux-page .lp-form-sec .lfv-split{height:auto;min-height:0;}
#wdi-ux-page .lp-form-sec .lfv-scroll{overflow:visible;}
#wdi-ux-page .lp-form-sec .lfv-pane{overflow:visible;}
/* the landing never wants the cinematic 100% intro to look empty -
   keep the rail proportion sane while collapsed */
#wdi-ux-page .lp-form-sec .lfv-side{min-height:100%;}

/* ============================================================
   BAND CTA - restore pill + circular arrow (contact css not loaded here)
   ============================================================ */
#wdi-ux-page .ct-band-cta{margin-top:34px;display:inline-flex;align-items:center;gap:11px;position:relative;z-index:2;
  font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:-0.01em;color:#fff;
  background:var(--rose-500);border:1px solid var(--rose-500);border-radius:999px;padding:14px 24px;text-decoration:none;
  transition:background .3s,border-color .3s,color .3s,transform .3s,box-shadow .3s;}
#wdi-ux-page .ct-band-cta .ar{width:28px;height:28px;flex:none;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;transition:background .3s,transform .3s;}
#wdi-ux-page .ct-band-cta .ar svg{width:15px;height:15px;}
#wdi-ux-page .ct-band-cta:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.28);}
#wdi-ux-page .ct-band-cta:hover .ar{transform:translateX(2px);background:rgba(11,12,14,.1);}

/* ============================================================
   LEAD-FORM TICKER  (redesigned signal bar atop the form)
   ============================================================ */
#wdi-ux-page .lp-ticker{position:relative;display:flex;align-items:stretch;height:56px;
  background:linear-gradient(180deg,#0e0f13 0%,#0b0c0e 100%);
  border-top:1px solid rgba(228,18,82,.28);
  border-bottom:1px solid rgba(255,255,255,.07);
  overflow:hidden;}
/* faint rose glow riding the top edge */
#wdi-ux-page .lp-ticker::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(228,18,82,.9),transparent);
  background-size:50% 100%;background-repeat:no-repeat;animation:lpTkGlow 6s linear infinite;}
@keyframes lpTkGlow{0%{background-position:-50% 0;}100%{background-position:150% 0;}}

/* pinned left badge */
#wdi-ux-page .lp-ticker-badge{position:relative;z-index:3;flex:none;display:inline-flex;align-items:center;gap:10px;
  padding:0 22px 0 clamp(22px,5vw,64px);
  font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:#0b0c0e;
  border-right:1px solid rgba(255,255,255,.09);white-space:nowrap;}
#wdi-ux-page .lp-ticker-badge::after{content:"";position:absolute;top:0;bottom:0;right:-44px;width:44px;
  background:linear-gradient(90deg,#0b0c0e,transparent);pointer-events:none;}
#wdi-ux-page .lp-ticker-dot{width:7px;height:7px;border-radius:50%;background:var(--rose-500);
  box-shadow:0 0 0 0 rgba(228,18,82,.55);animation:lpTkPulse 2.4s ease-out infinite;}
@keyframes lpTkPulse{0%{box-shadow:0 0 0 0 rgba(228,18,82,.5);}70%{box-shadow:0 0 0 7px rgba(228,18,82,0);}100%{box-shadow:0 0 0 0 rgba(228,18,82,0);}}

/* scrolling viewport */
#wdi-ux-page .lp-ticker-view{position:relative;flex:1;overflow:hidden;}
#wdi-ux-page .lp-ticker-view::before,#wdi-ux-page .lp-ticker-view::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
#wdi-ux-page .lp-ticker-view::before{left:0;background:linear-gradient(90deg,#0b0c0e,transparent);}
#wdi-ux-page .lp-ticker-view::after{right:0;background:linear-gradient(270deg,#0b0c0e,transparent);}
#wdi-ux-page .lp-ticker-inner{display:flex;width:max-content;height:100%;animation:lpTkScroll 42s linear infinite;}
#wdi-ux-page .lp-ticker:hover .lp-ticker-inner{animation-play-state:paused;}
#wdi-ux-page .lp-ticker-track{display:flex;align-items:center;flex:none;}
#wdi-ux-page .lp-tk{display:inline-flex;align-items:center;gap:34px;padding:0 17px;height:56px;
  font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.58);white-space:nowrap;transition:color .3s;}
#wdi-ux-page .lp-ticker-track .lp-tk:nth-child(odd){color:rgba(255,255,255,.82);}
#wdi-ux-page .lp-tk i{font-style:normal;font-size:11px;color:var(--rose-500);transform:translateY(-1px);
  text-shadow:0 0 10px rgba(228,18,82,.75);}
@keyframes lpTkScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){#wdi-ux-page .lp-ticker-inner{animation:none;}#wdi-ux-page .lp-ticker::before{animation:none;}}
@media (max-width:680px){#wdi-ux-page .lp-ticker-badge{display:none;}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  #wdi-ux-page .lp-path-grid,#wdi-ux-page .lp-out-grid{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .lp-prob-grid{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .lp-cap-grid{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .lp-diag-grid{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .lp-diag-head{grid-column:1 / -1;}
  #wdi-ux-page .lp-pillars{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .lp-pillar.span2{grid-column:span 2;}
  #wdi-ux-page .lp-ai-grid{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .lp-engage-grid{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .lp-eng,#wdi-ux-page .lp-eng:nth-child(4),#wdi-ux-page .lp-eng:nth-child(5){grid-column:auto;}
  #wdi-ux-page .lp-eng:nth-child(5){grid-column:1 / -1;}
  #wdi-ux-page .lp-wy-card{flex-basis:300px;}
  #wdi-ux-page .lp-proc-cols{grid-template-columns:repeat(3,1fr);}
  #wdi-ux-page .lp-sol-head2{grid-template-columns:1fr;gap:16px;align-items:start;}
  #wdi-ux-page .lp-sol-head2-p{padding-bottom:0;}
  #wdi-ux-page .lp-solr-main{grid-template-columns:minmax(0,240px) 1fr;grid-template-areas:"l mid" "thumb thumb";row-gap:24px;}
  #wdi-ux-page .lp-solr-l{grid-area:l;}
  #wdi-ux-page .lp-solr-mid{grid-area:mid;}
  #wdi-ux-page .lp-solr-thumb{grid-area:thumb;aspect-ratio:21/8;}
}
@media (max-width:680px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .lp-path-grid,#wdi-ux-page .lp-out-grid,#wdi-ux-page .lp-pillars,#wdi-ux-page .lp-ai-grid,#wdi-ux-page .lp-engage-grid,#wdi-ux-page .lp-prob-grid,#wdi-ux-page .lp-team-grid,#wdi-ux-page .lp-cap-grid,#wdi-ux-page .lp-diag-grid{grid-template-columns:1fr;}
  #wdi-ux-page .lp-gov-grid{grid-template-columns:1fr;gap:32px;}
  #wdi-ux-page .lp-gov-l{position:static;}
  #wdi-ux-page .lp-cmp-headrow{display:none;}
  #wdi-ux-page .lp-cmp-row{grid-template-columns:1fr;}
  #wdi-ux-page .lp-cmp-cat{border-bottom:1px solid var(--line);}
  #wdi-ux-page .lp-cmp-cell{border-left:none;}
  #wdi-ux-page .lp-cmp-cell.ai::before{content:"AI-only / vibe-coded";}
  #wdi-ux-page .lp-cmp-cell.wdi::before{content:"WDI human-in-the-loop";}
  #wdi-ux-page .lp-cmp-cell.ai::before,#wdi-ux-page .lp-cmp-cell.wdi::before{position:absolute;top:10px;left:58px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
  #wdi-ux-page .lp-cmp-cell{position:relative;padding-top:30px;}
  #wdi-ux-page .lp-cmp-cta{flex-direction:column;align-items:flex-start;}
  /* product-intelligence: stack vertically, drop the SVG choreography */
  #wdi-ux-page .piw-stage{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:420px;padding:24px 18px;}
  #wdi-ux-page .piw-svg{display:none;}
  #wdi-ux-page .piw-chip,#wdi-ux-page .piw-core,#wdi-ux-page .piw-out{position:static;transform:none;opacity:1;scale:1;width:100%;justify-content:center;}
  #wdi-ux-page .piw-stage.go .piw-chip,#wdi-ux-page .piw-stage.go .piw-core,#wdi-ux-page .piw-stage.go .piw-out{transform:none;transition:none;}
  #wdi-ux-page .piw-chip{white-space:normal;}
  #wdi-ux-page .piw-core-ring{display:none;}
  #wdi-ux-page .piw-core-pill{white-space:normal;text-align:center;}
  #wdi-ux-page .lp-team-phil{grid-template-columns:1fr;gap:28px;}
  #wdi-ux-page .lp-phil-list{grid-template-columns:1fr 1fr;}
  #wdi-ux-page .lp-eng,#wdi-ux-page .lp-eng:nth-child(4),#wdi-ux-page .lp-eng:nth-child(5){grid-column:auto;}
  #wdi-ux-page .lp-wy-stats{grid-template-columns:repeat(2,1fr);gap:24px 14px;}
  #wdi-ux-page .lp-wy-card{flex-basis:80vw;}
  #wdi-ux-page .lp-wy-foot{flex-direction:column;align-items:flex-start;}
  #wdi-ux-page .lp-solr-main{grid-template-columns:1fr;grid-template-areas:"l" "mid" "thumb";}
  #wdi-ux-page .lp-solr-thumb{aspect-ratio:16/10;}
  #wdi-ux-page .lp-proc-cols{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .lp-pcol{min-height:300px;}
  #wdi-ux-page .lp-proc-foot{flex-direction:column;gap:6px;}
  #wdi-ux-page .lp-pillar.span2{grid-column:span 1;}
  #wdi-ux-page .lp-hero-cta,#wdi-ux-page .lp-final-cta{flex-direction:column;}
  #wdi-ux-page .lp-hero-cta .lp-btn,#wdi-ux-page .lp-final-cta .lp-btn{width:100%;justify-content:center;}
  #wdi-ux-page .lp-hero-trust{gap:16px;}
  #wdi-ux-page .lp-hero-trust .d{display:none;}
  #wdi-ux-page .lpnav-in{padding:0 22px;height:64px;}
  #wdi-ux-page .lpnav-name em{display:none;}
  #wdi-ux-page .lpnav-cta .lp-btn-ghost{display:none;}
  #wdi-ux-page .lpnav-btn{padding:10px 16px;font-size:13.5px;}
  #wdi-ux-page .lpfoot-bottom{flex-direction:column;align-items:center;gap:8px;text-align:center;}
  #wdi-ux-page .lpfoot-in{grid-template-columns:1fr;gap:36px;}
  #wdi-ux-page .lpfoot-r{min-width:0;}
}

/* ============================================================
   UNIFIED SECTION HEADERS - consistent size + weight sitewide
   ============================================================ */
#wdi-ux-page .lp-h,#wdi-ux-page .lp-eco-h,#wdi-ux-page .lp-diag-h,#wdi-ux-page .pp-band h2,#wdi-ux-page .pfd-h,#wdi-ux-page .tsm-head .ts-h,#wdi-ux-page .lp-final-h,#wdi-ux-page .fq-h,#wdi-ux-page .ave-h{
  font-size:clamp(30px,4.2vw,52px)!important;
  font-weight:600!important;
  letter-spacing:-0.035em!important;
  line-height:1.05!important;
}

/* ============================================================
   WDI — Resources & Insights  (Variants A–D)
   WDI system: rose accent, ink type, Figtree, light.
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--violet:#7A00FF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
#wdi-ux-page *{margin:0;padding:0;box-sizing:border-box;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip;}
#wdi-ux-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

#wdi-ux-page .rs-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
#wdi-ux-page .rs-vtag b{color:var(--ink);font-weight:500;}
#wdi-ux-page .rs-vtag .pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:4px 11px;margin-right:8px;}

#wdi-ux-page .rs-sec{position:relative;padding:104px 0 118px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
#wdi-ux-page .rs-sec.alt{background:var(--bg-2);}

/* shared header */
#wdi-ux-page .rs-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .rs-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page .rs-h{margin-top:20px;font-size:clamp(32px,4.4vw,60px);line-height:1.02;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .rs-aeo{margin-top:20px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;font-weight:300;color:var(--ink-2);text-wrap:pretty;max-width:74ch;}
#wdi-ux-page .rs-supp{margin-top:14px;font-size:15px;line-height:1.65;font-weight:400;color:var(--muted);max-width:74ch;text-wrap:pretty;}

/* shared bits */
#wdi-ux-page .rs-type{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .rs-type::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));}
#wdi-ux-page .rs-tag{font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap;}
#wdi-ux-page .rs-readmore{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:color .25s,gap .25s;}
#wdi-ux-page .rs-readmore svg{width:16px;height:16px;color:var(--rose-600);transition:transform .25s;}
#wdi-ux-page .rs-readmore:hover{color:var(--rose-600);gap:12px;}
#wdi-ux-page .rs-readmore:hover svg{transform:translateX(3px);}

/* media slot frame */
#wdi-ux-page image-slot{display:block;width:100%;height:100%;background:
  radial-gradient(120% 120% at 80% 10%,rgba(249,47,100,.12),transparent 55%),
  radial-gradient(100% 100% at 10% 95%,rgba(122,0,255,.10),transparent 60%),#0c0d11;color:rgba(255,255,255,.55);font-family:var(--font);}
/* stock image fill */
#wdi-ux-page .rs-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1);}

/* section CTA */
#wdi-ux-page .rs-cta{margin-top:60px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:38px 42px;border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.07),transparent 58%),var(--bg);}
#wdi-ux-page .rs-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rose-600),var(--rose-400) 55%,var(--violet));}
#wdi-ux-page .rs-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page .rs-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:64ch;}
#wdi-ux-page .rs-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}
#wdi-ux-page .rs-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:500;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,box-shadow .25s;}
#wdi-ux-page .rs-btn svg{width:16px;height:16px;transition:transform .25s;}
#wdi-ux-page .rs-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
#wdi-ux-page .rs-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .rs-btn-ghost{display:inline-flex;align-items:center;font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:14px 22px;text-decoration:none;cursor:pointer;transition:border-color .25s,transform .25s;}
#wdi-ux-page .rs-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

/* ============================================================
   VARIANT A — BOLD EDITORIAL (3 image cards + category tabs)
   ============================================================ */
#wdi-ux-page .rsa-head{max-width:900px;}
#wdi-ux-page .rsa-tabs{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2;}
#wdi-ux-page .rsa-tab{font-family:var(--font);font-size:13.5px;font-weight:500;letter-spacing:-0.01em;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:color .25s,background .25s,border-color .25s;}
#wdi-ux-page .rsa-tab:hover{color:var(--ink);border-color:var(--line-2);}
#wdi-ux-page .rsa-tab.active{color:#fff;background:var(--ink);border-color:var(--ink);}
#wdi-ux-page .rsa-grid{margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
#wdi-ux-page .rsa-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rs-sec.in .rsa-card{opacity:1;transform:none;transition-delay:var(--d);}
#wdi-ux-page .rsa-card.hide{display:none;}
#wdi-ux-page .rsa-media{position:relative;width:100%;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0c0d11;box-shadow:0 14px 36px rgba(11,12,14,.10);}
#wdi-ux-page .rsa-media image-slot{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rsa-card:hover .rsa-media .rs-fill{transform:scale(1.05);}
#wdi-ux-page .rsa-media-tag{position:absolute;left:16px;top:16px;z-index:3;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(10,11,14,.5);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 12px;backdrop-filter:blur(8px);}
#wdi-ux-page .rsa-meta{margin-top:20px;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;color:var(--muted);}
#wdi-ux-page .rsa-title{margin-top:12px;font-size:23px;font-weight:500;letter-spacing:-0.02em;line-height:1.15;color:var(--ink);text-wrap:balance;transition:color .25s;}
#wdi-ux-page .rsa-card:hover .rsa-title{color:var(--rose-700);}
#wdi-ux-page .rsa-desc{margin-top:12px;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-2);}
#wdi-ux-page .rsa-foot{margin-top:auto;padding-top:18px;}
#wdi-ux-page .rsa-more{margin-top:48px;display:flex;justify-content:center;}

/* ============================================================
   VARIANT B — MINIMAL LEDGER (no image, 3-column rows)
   ============================================================ */
#wdi-ux-page .rsb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;}
#wdi-ux-page .rsb-filters{display:flex;gap:8px;flex-wrap:wrap;}
#wdi-ux-page .rsb-filter{font-family:var(--font);font-size:13px;font-weight:500;color:var(--muted);background:var(--bg-2);border:1px solid transparent;border-radius:999px;padding:8px 16px;cursor:pointer;transition:color .25s,background .25s;}
#wdi-ux-page .rsb-filter:hover{color:var(--ink);}
#wdi-ux-page .rsb-filter.active{color:var(--ink);background:#fff;border-color:var(--line);box-shadow:0 1px 3px rgba(11,12,14,.05);}
#wdi-ux-page .rsb-list{margin-top:50px;border-top:1px solid var(--line);}
#wdi-ux-page .rsb-row{display:grid;grid-template-columns:200px 1.3fr 1.4fr;gap:40px;align-items:start;padding:38px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;position:relative;transition:padding-left .4s cubic-bezier(.2,.7,.2,1);opacity:0;transform:translateY(20px);}
#wdi-ux-page .rs-sec.in .rsb-row{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1),padding-left .4s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d);}
#wdi-ux-page .rsb-row::before{content:"";position:absolute;left:0;top:38px;bottom:38px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--rose-600),var(--rose-400));transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rsb-row:hover{padding-left:22px;}
#wdi-ux-page .rsb-row:hover::before{transform:scaleY(1);}
#wdi-ux-page .rsb-type{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.01em;padding-top:3px;}
#wdi-ux-page .rsb-main .rsb-title{font-size:21px;font-weight:500;letter-spacing:-0.02em;line-height:1.2;color:var(--ink);text-wrap:balance;transition:color .25s;}
#wdi-ux-page .rsb-row:hover .rsb-title{color:var(--rose-700);}
#wdi-ux-page .rsb-tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px;}
#wdi-ux-page .rsb-desc{font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-2);}
#wdi-ux-page .rsb-desc .rs-readmore{margin-top:14px;}

/* ============================================================
   VARIANT C — TWO-UP FEATURE (big images, tags+title+sub below)
   ============================================================ */
#wdi-ux-page .rsc-grid{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;}
#wdi-ux-page .rsc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rs-sec.in .rsc-card{opacity:1;transform:none;transition-delay:var(--d);}
#wdi-ux-page .rsc-media{position:relative;width:100%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0c0d11;box-shadow:0 20px 50px rgba(11,12,14,.12);}
#wdi-ux-page .rsc-media image-slot{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rsc-card:hover .rsc-media .rs-fill{transform:scale(1.04);}
#wdi-ux-page .rsc-media::after{content:"";position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none;}
#wdi-ux-page .rsc-tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
#wdi-ux-page .rsc-title{margin-top:16px;font-size:clamp(24px,2.2vw,30px);font-weight:500;letter-spacing:-0.025em;line-height:1.12;color:var(--ink);text-wrap:balance;transition:color .25s;}
#wdi-ux-page .rsc-card:hover .rsc-title{color:var(--rose-700);}
#wdi-ux-page .rsc-sub{margin-top:13px;font-size:15px;font-weight:300;line-height:1.55;color:var(--ink-2);max-width:54ch;}
#wdi-ux-page .rsc-foot{margin-top:18px;}

/* ============================================================
   VARIANT D — CREATIVE INTERACTIVE INDEX (dark, hover-preview)
   ============================================================ */
#wdi-ux-page .rsd-sec{background:#0A0B0E;color:#fff;border-top:1px solid var(--line);}
#wdi-ux-page .rsd-sec .rs-eyebrow{color:var(--rose-300);}
#wdi-ux-page .rsd-sec .rs-h{color:#fff;}
#wdi-ux-page .rsd-sec .rs-aeo{color:rgba(255,255,255,.72);}
#wdi-ux-page .rsd-aura{position:absolute;width:680px;height:680px;border-radius:50%;right:-200px;top:40px;z-index:0;pointer-events:none;
  background:conic-gradient(from 90deg,rgba(249,47,100,.20),rgba(122,0,255,.16),rgba(0,200,255,.10),rgba(255,179,0,.14),rgba(249,47,100,.20));
  filter:blur(90px);opacity:.5;animation:rsdSpin 26s linear infinite;}
@keyframes rsdSpin{to{transform:rotate(360deg);}}
#wdi-ux-page .rsd-wrap{margin-top:60px;position:relative;z-index:2;display:grid;grid-template-columns:1.15fr 0.85fr;gap:50px;align-items:start;}
#wdi-ux-page .rsd-list{display:flex;flex-direction:column;}
#wdi-ux-page .rsd-row{position:relative;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:22px;padding:26px 8px;border-top:1px solid rgba(255,255,255,.10);cursor:pointer;text-align:left;background:none;border-left:none;border-right:none;border-bottom:none;font-family:var(--font);transition:padding-left .4s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rsd-row:last-child{border-bottom:1px solid rgba(255,255,255,.10);}
#wdi-ux-page .rsd-row:hover{padding-left:18px;}
#wdi-ux-page .rsd-num{font-size:13px;font-weight:600;color:rgba(255,255,255,.4);font-feature-settings:"tnum" 1;transition:color .3s;}
#wdi-ux-page .rsd-row.active .rsd-num{color:var(--rose-300);}
#wdi-ux-page .rsd-rtitle{font-size:clamp(18px,1.7vw,23px);font-weight:500;letter-spacing:-0.02em;line-height:1.2;color:rgba(255,255,255,.66);transition:color .3s;}
#wdi-ux-page .rsd-row:hover .rsd-rtitle,#wdi-ux-page .rsd-row.active .rsd-rtitle{color:#fff;}
#wdi-ux-page .rsd-rtype{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);}
#wdi-ux-page .rsd-arrow{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.18);color:#fff;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s,background .3s,border-color .3s;}
#wdi-ux-page .rsd-arrow svg{width:17px;height:17px;}
#wdi-ux-page .rsd-row:hover .rsd-arrow,#wdi-ux-page .rsd-row.active .rsd-arrow{opacity:1;transform:none;}
#wdi-ux-page .rsd-row:hover .rsd-arrow{background:var(--rose-600);border-color:var(--rose-600);}
/* preview pane */
#wdi-ux-page .rsd-preview{position:sticky;top:40px;border-radius:24px;overflow:hidden;background:#101116;border:1px solid rgba(255,255,255,.10);min-height:440px;display:flex;flex-direction:column;}
#wdi-ux-page .rsd-pv-media{position:relative;width:100%;aspect-ratio:16/10;background:#0c0d11;overflow:hidden;}
#wdi-ux-page .rsd-pv-slot{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
#wdi-ux-page .rsd-pv-slot.active{opacity:1;}
#wdi-ux-page .rsd-pv-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1;}
#wdi-ux-page .rsd-pv-type{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page .rsd-pv-title{margin-top:12px;font-size:22px;font-weight:500;letter-spacing:-0.02em;line-height:1.18;color:#fff;}
#wdi-ux-page .rsd-pv-desc{margin-top:12px;font-size:14px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.7);}
#wdi-ux-page .rsd-pv-fx{transform:translateY(10px);filter:blur(6px);}
#wdi-ux-page .rsd-pv-fx.show{transform:none;filter:blur(0);transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .45s ease;}
#wdi-ux-page .rsd-pv-foot{margin-top:auto;padding-top:22px;}
#wdi-ux-page .rsd-pv-foot .rs-readmore{color:#fff;}
#wdi-ux-page .rsd-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px;}
#wdi-ux-page .rsd-tags .rs-tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.82);}

/* ============================================================
   VARIANT E — FEATURED + SIDEBAR (monday.com layout)
   ============================================================ */
#wdi-ux-page .rse-grid{margin-top:56px;display:grid;grid-template-columns:1.5fr 1fr;gap:42px;align-items:start;}
#wdi-ux-page .rse-feat{display:flex;flex-direction:column;text-decoration:none;color:inherit;opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rs-sec.in .rse-feat{opacity:1;transform:none;}
#wdi-ux-page .rse-feat-media{position:relative;width:100%;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#0c0d11;box-shadow:0 20px 50px rgba(11,12,14,.12);}
#wdi-ux-page .rse-feat-media .rs-fill{transition:transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rse-feat:hover .rse-feat-media .rs-fill{transform:scale(1.04);}
#wdi-ux-page .rse-feat .rs-type{margin-top:26px;}
#wdi-ux-page .rse-feat-title{margin-top:16px;font-size:clamp(30px,3.4vw,44px);font-weight:500;letter-spacing:-0.03em;line-height:1.05;color:var(--ink);text-wrap:balance;transition:color .25s;}
#wdi-ux-page .rse-feat:hover .rse-feat-title{color:var(--rose-700);}
#wdi-ux-page .rse-feat-desc{margin-top:18px;font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2);max-width:60ch;}
#wdi-ux-page .rse-feat-foot{margin-top:20px;}

#wdi-ux-page .rse-side{display:flex;flex-direction:column;gap:30px;}
#wdi-ux-page .rse-item{display:flex;flex-direction:column;text-decoration:none;color:inherit;opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rs-sec.in .rse-item{opacity:1;transform:none;transition-delay:var(--d);}
#wdi-ux-page .rse-item-media{position:relative;width:100%;aspect-ratio:16/8;border-radius:16px;overflow:hidden;background:#0c0d11;box-shadow:0 12px 30px rgba(11,12,14,.10);}
#wdi-ux-page .rse-item-media .rs-fill{transition:transform .7s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .rse-item:hover .rse-item-media .rs-fill{transform:scale(1.05);}
#wdi-ux-page .rse-item .rs-type{margin-top:16px;}
#wdi-ux-page .rse-item-title{margin-top:10px;font-size:22px;font-weight:500;letter-spacing:-0.02em;line-height:1.18;color:var(--ink);text-wrap:balance;transition:color .25s;}
#wdi-ux-page .rse-item:hover .rse-item-title{color:var(--rose-700);}
#wdi-ux-page .rse-item-read{margin-top:10px;font-size:13px;font-weight:400;color:var(--muted);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  #wdi-ux-page .rsa-grid{grid-template-columns:1fr;gap:30px;}
  #wdi-ux-page .rsa-card.hide{display:flex;}
  #wdi-ux-page .rsb-row{grid-template-columns:1fr;gap:12px;}
  #wdi-ux-page .rsb-type{padding-top:0;}
  #wdi-ux-page .rsc-grid{grid-template-columns:1fr;}
  #wdi-ux-page .rsd-wrap{grid-template-columns:1fr;gap:30px;}
  #wdi-ux-page .rsd-preview{display:none;}
  #wdi-ux-page .rse-grid{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:760px){
  #wdi-ux-page .wrap{padding:0 22px;}
  #wdi-ux-page .rs-sec{padding:70px 0 80px;}
  #wdi-ux-page .rs-vtag{padding:22px 22px 0;}
  #wdi-ux-page .rs-cta{padding:26px;gap:20px;}
  #wdi-ux-page .rs-cta-actions{width:100%;}
  #wdi-ux-page .rs-cta .rs-btn,#wdi-ux-page .rs-btn-ghost{flex:1;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .rsa-card,#wdi-ux-page .rsb-row,#wdi-ux-page .rsc-card{opacity:1!important;transform:none!important;}
  #wdi-ux-page .rse-feat,#wdi-ux-page .rse-item{opacity:1!important;transform:none!important;}
  #wdi-ux-page .rsd-aura{animation:none;}
  #wdi-ux-page .rsa-media image-slot,#wdi-ux-page .rsc-media image-slot,#wdi-ux-page .rsd-pv-slot{transition:none;}
  #wdi-ux-page .rsd-pv-fx{transform:none;filter:none;}
}

/* ============================================================
   WDI — T02 Design Thinking · page-specific presentation
   Layered on top of the shared section stylesheets.
   ============================================================ */

/* ---- process (Variant B) — eight stages on a single row ---- */
#wdi-ux-page #design-thinking-process .prc-cells{grid-template-columns:repeat(8,1fr);column-gap:18px;}
#wdi-ux-page #design-thinking-process .prc-cell,#wdi-ux-page #design-thinking-process .prc-flip{min-height:280px;}
#wdi-ux-page #design-thinking-process .prc-face{padding:22px 18px;}
#wdi-ux-page #design-thinking-process .prc-title-s{font-size:15.5px;line-height:1.2;}
#wdi-ux-page #design-thinking-process .prc-desc-s,#wdi-ux-page #design-thinking-process .prc-back-text{font-size:12.5px;line-height:1.45;}
#wdi-ux-page #design-thinking-process .prc-back-aeo{font-size:11.5px;}
@media(max-width:1400px){#wdi-ux-page #design-thinking-process .prc-cells{grid-template-columns:repeat(4,1fr);}}
@media(max-width:900px){#wdi-ux-page #design-thinking-process .prc-cells{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){#wdi-ux-page #design-thinking-process .prc-cells{grid-template-columns:1fr;}}

/* global navigation sticks to the top of the page while scrolling */
#wdi-ux-page #navAvF4{position:sticky;top:0;z-index:200;}
#wdi-ux-page #navAvF4 .nvf2{position:relative;z-index:200;}

/* hero progression: Business problem → User evidence → Product direction → Validated experience */
#wdi-ux-page .t02-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:clamp(30px,3.6vw,44px);}
#wdi-ux-page .t02-flow span{font-size:13px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:9px 17px;box-shadow:0 6px 18px rgba(11,12,14,.05);}
#wdi-ux-page .t02-flow i{width:26px;height:1.5px;flex:none;background:linear-gradient(90deg,var(--rose-500),var(--violet-2));position:relative;}
#wdi-ux-page .t02-flow i::after{content:"";position:absolute;right:-1px;top:-3px;width:0;height:0;border-left:5px solid var(--violet-2);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;}
@media(max-width:680px){#wdi-ux-page .t02-flow i{display:none;}}

/* governance CTA — light, so it does not sit dark-on-dark before the methods section */
#wdi-ux-page .t02-mini-light{position:relative;background:var(--bg-2);color:var(--ink);text-align:center;overflow:hidden;isolation:isolate;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
#wdi-ux-page .t02-mini-light .lp-h{color:var(--ink);}
#wdi-ux-page .t02-mini-aura{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 120% at 50% 0%,rgba(249,47,100,.09),transparent 62%);}
#wdi-ux-page .t02-mini-light .wrap{position:relative;z-index:1;}
#wdi-ux-page .t02-mini-light p{max-width:58ch;margin:14px auto 0;font-size:16px;font-weight:300;line-height:1.55;color:var(--muted);}
#wdi-ux-page .t02-mini-light .lp-inline-cta{margin-top:28px;}

/* method cards read as methods, not logos */
#wdi-ux-page .teb-card img{display:none;}
#wdi-ux-page .teb-card .teb-name{font-size:15px;}

/* section-by-section scroll reveal */
#wdi-ux-page .t02-sec{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .t02-sec.t02-in{opacity:1;transform:none;}
/* elements inside each section stagger in as the section arrives */
#wdi-ux-page .t02-stagger{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--sd,0s);}
#wdi-ux-page .t02-sec.t02-in .t02-stagger{opacity:1;transform:none;}

/* keyboard focus visibility across reused interactive modules */
#wdi-ux-page .sv1-pill:focus-visible,#wdi-ux-page .teb-tab:focus-visible,#wdi-ux-page .ts-arrow:focus-visible,#wdi-ux-page .cd-nav button:focus-visible,#wdi-ux-page .pra-toggle:focus-visible,#wdi-ux-page .em-btn:focus-visible,#wdi-ux-page .hbtn:focus-visible,#wdi-ux-page .lp-btn:focus-visible{
  outline:2px solid var(--rose-500);outline-offset:3px;border-radius:8px;
}

@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .t02-sec{opacity:1;transform:none;transition:none;}
  #wdi-ux-page .t02-stagger{opacity:1;transform:none;transition:none;}
}

/* sub-services rail sits clear of the sticky navigation */
#wdi-ux-page #design-subservices .sv5-rail{top:104px;}
#wdi-ux-page #design-subservices .sv5-rail,#wdi-ux-page #design-subservices .sv5-grid{scroll-margin-top:104px;}

/* per-item reveal used by the scroll steppers */
#wdi-ux-page .t02-slide{opacity:0;transition:opacity .7s ease var(--rd,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--rd,0s);}
#wdi-ux-page .t02-slide.t02-from-left{transform:translateX(-38px);}
#wdi-ux-page .t02-slide.t02-from-right{transform:translateX(38px);}
#wdi-ux-page .t02-rise{opacity:0;transform:translateY(26px);transition:opacity .7s ease var(--rd,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--rd,0s);}
#wdi-ux-page .t02-slide.t02-shown,#wdi-ux-page .t02-rise.t02-shown{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .t02-slide,#wdi-ux-page .t02-rise{opacity:1;transform:none;transition:none;}
}

/* pinned sections: on shorter viewports keep the CARD in view, not the header */
#wdi-ux-page .t02-pin > .t02-pinned .svv-head,
#wdi-ux-page .t02-pin > .t02-pinned .chal-head,
#wdi-ux-page .t02-pin > .t02-pinned .ivv-head{transition:margin-top .3s ease;}
@media(max-height:900px){
  #wdi-ux-page #design-thinking-services.t02-pinned .svv-head p,
  #wdi-ux-page #design-thinking-services.t02-pinned .sv1-intro,
  #wdi-ux-page #challenges.t02-pinned .chal-intro,
  #wdi-ux-page #challenges.t02-pinned .chal-seo,
  #wdi-ux-page #iv4.t02-pinned .ivv-head p{display:none;}
  #wdi-ux-page #design-thinking-services.t02-pinned .svv-h,
  #wdi-ux-page #challenges.t02-pinned .chal-h,
  #wdi-ux-page #iv4.t02-pinned .ivv-h{font-size:clamp(24px,2.4vw,34px);margin-bottom:14px;}
  #wdi-ux-page #design-thinking-services.t02-pinned .svv-head,
  #wdi-ux-page #challenges.t02-pinned .chal-head,
  #wdi-ux-page #iv4.t02-pinned .ivv-head{margin-bottom:18px;}
}
@media(max-height:760px){
  #wdi-ux-page #design-thinking-services.t02-pinned .svv-head,
  #wdi-ux-page #challenges.t02-pinned .chal-head,
  #wdi-ux-page #iv4.t02-pinned .ivv-head{display:none;}
  #wdi-ux-page .t02-pin > .t02-pinned{padding-top:84px;padding-bottom:28px;}
}
/* pinned services section: freezes while scroll advances the pills */
#wdi-ux-page .t02-pin{position:relative;}
#wdi-ux-page .t02-pin > .t02-pinned{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
#wdi-ux-page .t02-pin-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line);}
#wdi-ux-page .t02-pin-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rose-500),var(--violet-2));transition:width .35s cubic-bezier(.2,.7,.2,1);}
@media(max-width:900px){
  #wdi-ux-page .t02-pin{height:auto!important;}
  #wdi-ux-page .t02-pin > .t02-pinned{position:static;min-height:0;}
  #wdi-ux-page .t02-pin-bar{display:none;}
}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .t02-pin{height:auto!important;}
  #wdi-ux-page .t02-pin > .t02-pinned{position:static;min-height:0;}
}

/* t02-smooth · calmer transitions for the pinned service switcher */
#wdi-ux-page #design-thinking-services .sv1-panel,#wdi-ux-page #design-thinking-services .sv1-visual{transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #design-thinking-services .sv1-pill{transition:background .45s ease,color .45s ease,border-color .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .t02-pin-bar span{transition:width .55s cubic-bezier(.25,.8,.25,1);}

/* local gradient artwork stands in for imagery (no external images used) */
#wdi-ux-page .t02-art{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;}
#wdi-ux-page .t02-art svg{position:absolute;inset:0;width:100%;height:100%;}
#wdi-ux-page .t02-art b{position:absolute;left:16px;bottom:14px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92);}
#wdi-ux-page #design-thinking-services .sv1-visual .t02-art{aspect-ratio:4/5;height:100%;border-radius:20px;}

/* stock photography plates */
#wdi-ux-page .t02-photo{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--bg-2);}
#wdi-ux-page .t02-photo.is-tall{position:absolute;inset:0;height:auto;aspect-ratio:auto;border-radius:20px;}
#wdi-ux-page .t02-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #rsaGrid > *:hover .t02-photo img{transform:scale(1.05);}

/* keep the services visual bounded: photo fills the plate, grid cannot stretch it */
#wdi-ux-page #design-thinking-services .sv1-visual{position:relative;align-self:start;max-height:560px;min-height:420px;}
#wdi-ux-page #design-thinking-services .sv1-visual .t02-photo{position:absolute;inset:0;}
#wdi-ux-page #design-thinking-services .sv1-visual .t02-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* testimonial avatars: no fabricated portraits — branded placeholder only */
#wdi-ux-page .tsm-sec .av,#wdi-ux-page .tsm-sec .tsm-av{background:linear-gradient(140deg,var(--rose-400),var(--violet));}

/* process · single card flipping through the eight stages */
#wdi-ux-page .t02-proc .sa-head{max-width:900px;}
#wdi-ux-page .t02-proc-card{margin-top:clamp(30px,3.6vw,44px);display:grid;grid-template-columns:220px 1fr;gap:clamp(20px,3vw,40px);align-items:start;}
#wdi-ux-page .t02-proc-rail{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);}
#wdi-ux-page .t02-proc-tab{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;font:inherit;text-align:left;
  padding:11px 14px;color:var(--muted);border-left:2px solid transparent;margin-left:-1px;transition:color .3s,border-color .3s,background .3s;}
#wdi-ux-page .t02-proc-tab .n{font-size:11.5px;font-weight:700;font-feature-settings:"tnum" 1;color:var(--faint);transition:color .3s;}
#wdi-ux-page .t02-proc-tab .k{font-size:14px;font-weight:600;letter-spacing:-0.01em;}
#wdi-ux-page .t02-proc-tab:hover{color:var(--ink);}
#wdi-ux-page .t02-proc-tab.active{color:var(--ink);border-left-color:var(--rose-500);background:linear-gradient(90deg,rgba(249,47,100,.06),transparent);}
#wdi-ux-page .t02-proc-tab.active .n{color:var(--rose-600);}
#wdi-ux-page .t02-proc-stage{position:relative;min-height:clamp(400px,44vw,470px);background:var(--bg-2);border:1px solid var(--line);border-radius:24px;overflow:hidden;}
#wdi-ux-page .t02-proc-panel{position:absolute;inset:0;padding:clamp(26px,3.2vw,44px);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);overflow:auto;}
#wdi-ux-page .t02-proc-panel.active{opacity:1;transform:none;pointer-events:auto;}
#wdi-ux-page .t02-proc-num{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--rose-600);font-feature-settings:"tnum" 1;}
#wdi-ux-page .t02-proc-panel h3{margin-top:12px;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-0.03em;line-height:1.1;color:var(--ink);}
#wdi-ux-page .t02-proc-panel .lead{margin-top:12px;font-size:15.5px;font-weight:300;line-height:1.6;color:var(--ink-2);max-width:62ch;}
#wdi-ux-page .t02-proc-cols{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
#wdi-ux-page .t02-proc-cols .lb{display:block;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--rose-600);margin-bottom:7px;}
#wdi-ux-page .t02-proc-cols p{font-size:13.5px;font-weight:300;line-height:1.55;color:var(--muted);}
#wdi-ux-page .t02-proc-svcs{margin-top:20px;display:flex;flex-wrap:wrap;gap:7px;}
#wdi-ux-page .t02-proc-svcs span{font-size:12px;font-weight:500;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;}
@media(max-width:1000px){#wdi-ux-page .t02-proc-cols{grid-template-columns:1fr;}}
@media(max-width:900px){
  #wdi-ux-page .t02-proc-card{grid-template-columns:1fr;}
  #wdi-ux-page .t02-proc-rail{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);}
  #wdi-ux-page .t02-proc-tab{border-left:0;border-bottom:2px solid transparent;white-space:nowrap;}
  #wdi-ux-page .t02-proc-tab.active{border-bottom-color:var(--rose-500);background:none;}
  #wdi-ux-page .t02-proc-stage{min-height:0;}
  #wdi-ux-page .t02-proc-panel{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;display:none;}
  #wdi-ux-page .t02-proc-panel.active{display:block;}
}

/* WDI — portfolio v2 module, fully scoped to #work.
   The PPC pages use their own .pp-* namespace (.pp-form, .pp-row, .pp-field),
   so every rule here is confined to the Selected Work section to avoid collisions. */
#wdi-ux-page #work 

:root{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--violet:#7A00FF;--violet-2:#A24BFF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--page:#F5F3F0;--line:#ECEDF0;--line-2:#E3E4E8;--rose-soft:rgba(249,47,100,.10);
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1240px;
}
#wdi-ux-page #work 
.pp-hero{position:relative;padding:120px 0 90px;text-align:center;overflow:hidden;background:var(--bg);}
#wdi-ux-page #work .pp-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page #work .pp-hero .eyebrow::before,#wdi-ux-page #work .pp-hero .eyebrow::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--rose-400));}
#wdi-ux-page #work .pp-hero .eyebrow::after{background:linear-gradient(90deg,var(--rose-400),transparent);}
#wdi-ux-page #work .pp-hero h1{margin-top:26px;font-size:clamp(52px,10vw,150px);font-weight:600;letter-spacing:-0.05em;line-height:.9;color:var(--ink);}
#wdi-ux-page #work .pp-hero h1 .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page #work .pp-hero .sub{margin:30px auto 0;max-width:60ch;font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.55;color:var(--ink-2);}
#wdi-ux-page #work .pp-hero .meta{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;}
#wdi-ux-page #work .pp-hero .meta .stat b{font-size:30px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
#wdi-ux-page #work .pp-hero .meta .stat span{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--muted);}
#wdi-ux-page #work .pp-hero .meta .div{width:1px;height:34px;background:var(--line-2);}
#wdi-ux-page #work .pp-scrollcue{margin-top:46px;display:inline-flex;flex-direction:column;align-items:center;gap:8px;color:var(--faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
#wdi-ux-page #work .pp-scrollcue .mouse{width:22px;height:34px;border:1.5px solid var(--line-2);border-radius:12px;position:relative;}
#wdi-ux-page #work .pp-scrollcue .mouse::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;background:var(--rose-500);transform:translateX(-50%);animation:ppMouse 1.8s ease-in-out infinite;}
@keyframes ppMouse{0%{opacity:0;transform:translate(-50%,0);}40%{opacity:1;}100%{opacity:0;transform:translate(-50%,10px);}}
#wdi-ux-page #work 
.pp-band{position:relative;padding:130px 0;overflow:hidden;background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;}
#wdi-ux-page #work .pp-band-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;white-space:nowrap;
  font-size:clamp(90px,16vw,260px);font-weight:700;letter-spacing:-0.04em;line-height:1;color:rgba(255,255,255,.045);
  -webkit-text-stroke:1px rgba(255,255,255,.04);will-change:transform;}
#wdi-ux-page #work .pp-band-track.r1{animation:ppMarqueeL 34s linear infinite;top:34%;}
#wdi-ux-page #work .pp-band-track.r2{animation:ppMarqueeR 40s linear infinite;top:68%;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);}
@keyframes ppMarqueeL{from{transform:translate(0,-50%);}to{transform:translate(-50%,-50%);}}
@keyframes ppMarqueeR{from{transform:translate(-50%,-50%);}to{transform:translate(0,-50%);}}
#wdi-ux-page #work .pp-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 60% at 20% 30%,rgba(249,47,100,.16),transparent 60%),radial-gradient(40% 60% at 82% 72%,rgba(122,0,255,.16),transparent 60%);
  filter:blur(20px);animation:ppBandGlow 16s ease-in-out infinite alternate;}
@keyframes ppBandGlow{from{transform:translateX(-3%);}to{transform:translateX(3%);}}
#wdi-ux-page #work .pp-band-in{position:relative;z-index:2;text-align:center;max-width:1000px;margin:0 auto;}
#wdi-ux-page #work .pp-band .tag{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page #work .pp-band .tag .lvdot{width:7px;height:7px;border-radius:50%;background:var(--rose-400);box-shadow:0 0 0 0 rgba(249,47,100,.6);animation:ppPulse 2.4s ease-out infinite;}
@keyframes ppPulse{0%{box-shadow:0 0 0 0 rgba(249,47,100,.5);}70%{box-shadow:0 0 0 8px rgba(249,47,100,0);}100%{box-shadow:0 0 0 0 rgba(249,47,100,0);}}
#wdi-ux-page #work .pp-band h2{margin-top:24px;font-size:clamp(30px,4.4vw,60px);font-weight:500;letter-spacing:-0.035em;line-height:1.04;color:#fff;text-wrap:balance;}
#wdi-ux-page #work .pp-band h2 em{font-style:normal;background:linear-gradient(110deg,var(--rose-400),var(--violet-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page #work .pp-band p{margin:24px auto 0;max-width:62ch;font-size:clamp(16px,1.4vw,18.5px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.72);}
#wdi-ux-page #work 
.pp-projects{position:relative;padding:96px 0 0;background:var(--bg);}
#wdi-ux-page #work .pp-projects-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px;}
#wdi-ux-page #work .pp-projects-head .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page #work .pp-projects-head .eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page #work .pp-projects-head h2{margin-top:16px;font-size:clamp(30px,3.6vw,48px);font-weight:600;letter-spacing:-0.035em;line-height:1;color:var(--ink);}
#wdi-ux-page #work .pp-projects-head p{max-width:42ch;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--muted);}
#wdi-ux-page #work 
.pp-caps{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
#wdi-ux-page #work .pp-cap{font-family:var(--font);font-size:13.5px;font-weight:500;letter-spacing:-0.01em;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:9px 17px;cursor:pointer;transition:color .25s,background .25s,border-color .25s,transform .25s;}
#wdi-ux-page #work .pp-cap:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-2px);}
#wdi-ux-page #work .pp-cap.active{color:#fff;background:var(--ink);border-color:var(--ink);}
#wdi-ux-page #work .pp-cap .n{font-size:11px;opacity:.55;margin-left:6px;font-feature-settings:"tnum" 1;}
#wdi-ux-page #work 
.pp-stack{}
#wdi-ux-page #work .pp-card{position:relative;width:100vw;left:50%;transform:translateX(-50%);height:100vh;min-height:100vh;max-height:none;overflow:hidden;background:#08090c;border-top:1px solid rgba(255,255,255,.06);scroll-snap-align:start;scroll-snap-stop:always;}
#wdi-ux-page #work .pp-card[hidden]{display:none;}
#wdi-ux-page #work 
.pp-media{position:absolute;inset:0;z-index:0;transform:translate(calc(var(--px,0)*-13px),calc(var(--py,0)*-11px));transition:transform .35s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #work .pp-media img,#wdi-ux-page #work .pp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #work .pp-card.in .pp-media img,#wdi-ux-page #work .pp-card.in .pp-media video{animation:ppKen 16s ease-in-out infinite alternate;}
@keyframes ppKen{from{transform:scale(1.04);}to{transform:scale(1.13) translate(-1%,1%);}}
#wdi-ux-page #work 
.pp-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
   linear-gradient(to bottom,rgba(8,9,12,.78) 0%,rgba(8,9,12,.56) 30%,rgba(8,9,12,.62) 55%,rgba(8,9,12,.9) 84%,rgba(8,9,12,.98) 100%),
   radial-gradient(75% 120% at 12% 88%,color-mix(in srgb,var(--hue,#39E07B) 30%,transparent),transparent 60%),
   radial-gradient(60% 120% at 100% 0%,rgba(249,47,100,.26),transparent 58%);}
#wdi-ux-page #work .pp-glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(440px 440px at var(--cx,50%) var(--cy,28%),color-mix(in srgb,var(--hue,#39E07B) 26%,transparent),transparent 62%);}
#wdi-ux-page #work .pp-card.hot .pp-glow{opacity:1;}
#wdi-ux-page #work 
.pp-topbar{position:absolute;left:0;right:0;top:36px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin:0 auto;padding:0 40px;left:50%;transform:translateX(-50%);}
#work .pp-index{font-size:13px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.6);font-feature-settings:"tnum" 1;display:inline-block;margin-bottom:48px;}
#wdi-ux-page #work .pp-index b{color:#fff;}
#wdi-ux-page #work .pp-x{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);}
#wdi-ux-page #work .pp-x .cross{color:var(--hue,#39E07B);font-weight:700;}
#wdi-ux-page #work .pp-x b{color:#fff;}
#wdi-ux-page #work .pp-vind{position:absolute;right:40px;top:0;bottom:0;z-index:3;display:flex;align-items:center;pointer-events:none;}
#wdi-ux-page #work .pp-vind span{writing-mode:vertical-rl;text-orientation:mixed;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);}
#wdi-ux-page #work .pp-vind span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hue,#39E07B);margin-bottom:10px;box-shadow:0 0 10px var(--hue,#39E07B);}
#wdi-ux-page #work 
.pp-content{position:absolute;left:0;right:0;bottom:0;z-index:3;}
#wdi-ux-page #work .pp-content-in{max-width:var(--maxw);margin:0 auto;padding:120px 40px 70px;}
#wdi-ux-page #work .pp-logo{display:grid;place-items:start;margin-top:48px;margin-bottom:24px;
  opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #work .pp-logo .lg{font-weight:800;font-size:18px;letter-spacing:-0.02em;color:#fff;}
#wdi-ux-page #work .pp-logo img{height:52px;width:auto;max-width:240px;object-fit:contain;display:block;}
#wdi-ux-page #work .pp-logo .lg em{font-style:normal;color:color-mix(in srgb,var(--hue,#39E07B) 80%,#0B0C0E);}
#wdi-ux-page #work .pp-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(22px);transition:opacity .7s ease .04s,transform .8s cubic-bezier(.2,.7,.2,1) .04s;}
#wdi-ux-page #work .pp-eyebrow .n{color:var(--hue,#39E07B);}
#wdi-ux-page #work .pp-eyebrow .bar{width:30px;height:1px;background:rgba(255,255,255,.4);}
#wdi-ux-page #work .pp-name{margin-top:18px;font-size:clamp(46px,7vw,96px);font-weight:600;letter-spacing:-0.045em;line-height:.92;color:#fff;position:relative;
  opacity:0;transform:translateY(30px);transition:opacity .8s ease .1s,transform .9s cubic-bezier(.2,.7,.2,1) .1s;}
#wdi-ux-page #work .pp-name-tx{display:inline-block;
  background:linear-gradient(100deg,#fff 32%,color-mix(in srgb,var(--hue,#39E07B) 92%,#fff) 50%,#fff 68%);
  background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
#wdi-ux-page #work .pp-card.in .pp-name-tx{animation:ppSheen 1.5s cubic-bezier(.4,0,.2,1) .55s 1 forwards;}
#wdi-ux-page #work .pp-card.hot .pp-name-tx{animation:ppSheen 1.1s cubic-bezier(.4,0,.2,1) 0s 1 forwards;}
@keyframes ppSheen{from{background-position:100% 0;}to{background-position:0 0;}}
#wdi-ux-page #work .pp-tagline{margin-top:14px;font-size:clamp(21px,2.3vw,30px);font-weight:400;line-height:1.32;color:#fff;max-width:46ch;letter-spacing:-0.02em;
  opacity:0;transform:translateY(24px);transition:opacity .8s ease .18s,transform .9s cubic-bezier(.2,.7,.2,1) .18s;}
#wdi-ux-page #work .pp-desc{margin-top:16px;font-size:clamp(16px,1.6vw,20px);font-weight:300;line-height:1.5;color:rgba(255,255,255,.78);max-width:52ch;
  opacity:0;transform:translateY(22px);transition:opacity .8s ease .28s,transform .9s cubic-bezier(.2,.7,.2,1) .28s;}
#wdi-ux-page #work .pp-row{margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;max-width:540px;
  opacity:0;transform:translateY(20px);transition:opacity .8s ease .3s,transform .9s cubic-bezier(.2,.7,.2,1) .3s;}
#wdi-ux-page #work .pp-tags{display:flex;flex-wrap:wrap;gap:9px;}
#wdi-ux-page #work .pp-tag{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 13px;backdrop-filter:blur(6px);}
#wdi-ux-page #work .pp-tag.lead{background:var(--hue,#39E07B);color:#0B0C0E;border-color:var(--hue,#39E07B);}
#wdi-ux-page #work .pp-explore{display:inline-flex;align-items:center;gap:12px;font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;padding:16px 26px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);transition:background .3s,border-color .3s,transform .3s,gap .3s,color .3s;}
#wdi-ux-page #work .pp-explore svg{width:16px;height:16px;transition:transform .3s;}
#wdi-ux-page #work .pp-explore:hover{background:var(--hue,#39E07B);border-color:var(--hue,#39E07B);color:#0B0C0E;transform:translateY(-2px);gap:16px;}
#wdi-ux-page #work .pp-explore:hover svg{transform:translateX(3px);}
#wdi-ux-page #work .pp-card.in .pp-logo,#wdi-ux-page #work .pp-card.in .pp-eyebrow,#wdi-ux-page #work .pp-card.in .pp-name,#wdi-ux-page #work .pp-card.in .pp-tagline,#wdi-ux-page #work .pp-card.in .pp-desc,#wdi-ux-page #work .pp-card.in .pp-row{opacity:1;transform:none;}
#wdi-ux-page #work 
.pp-eyebrow{gap:13px;font-size:11.5px;letter-spacing:.28em;color:rgba(255,255,255,.82);}
#wdi-ux-page #work .pp-eyebrow .n{color:var(--hue,#39E07B);font-weight:700;}
#wdi-ux-page #work .pp-eyebrow .bar{width:38px;background:linear-gradient(90deg,var(--hue,#39E07B),transparent);height:1.5px;}
#wdi-ux-page #work 
.pp-keystat{position:absolute;left:50%;transform:translateX(-50%);top:148px;z-index:3;width:100%;max-width:var(--maxw);padding:0 40px;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
#wdi-ux-page #work .pp-keystat-label{display:inline-flex;flex-direction:row-reverse;align-items:center;gap:9px;font-size:9.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.44);
  opacity:0;transform:translateY(-12px);transition:opacity .7s ease .1s,transform .8s cubic-bezier(.2,.7,.2,1) .1s;}
#wdi-ux-page #work .pp-keystat-label::before{content:"";width:16px;height:1px;background:color-mix(in srgb,var(--hue,#39E07B) 75%,#fff);opacity:.7;}
#wdi-ux-page #work .pp-keystat-h{margin-top:15px;max-width:18ch;font-size:clamp(17px,1.75vw,25px);font-weight:300;line-height:1.34;letter-spacing:-0.012em;color:rgba(255,255,255,.72);text-wrap:balance;
  opacity:0;transform:translateY(-14px);transition:opacity .8s ease .16s,transform .9s cubic-bezier(.2,.7,.2,1) .16s;}
#wdi-ux-page #work .pp-mcaps{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px 0;justify-content:flex-end;max-width:34ch;
  opacity:0;transform:translateY(-10px);transition:opacity .8s ease .24s,transform .9s cubic-bezier(.2,.7,.2,1) .24s;}
#wdi-ux-page #work .pp-mcap{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.46);background:none;border:none;border-radius:0;padding:0;line-height:1;}
#wdi-ux-page #work .pp-mcap:not(:first-child){margin-left:11px;}
#wdi-ux-page #work .pp-mcap:not(:first-child)::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;margin-right:11px;vertical-align:middle;}
#wdi-ux-page #work .pp-card.in .pp-keystat-label,#wdi-ux-page #work .pp-card.in .pp-keystat-h,#wdi-ux-page #work .pp-card.in .pp-mcaps{opacity:1;transform:none;}
#wdi-ux-page #work 
.pp-reviews{position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:3;width:100%;max-width:var(--maxw);padding:0 40px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:11px;pointer-events:none;}
#wdi-ux-page #work .pp-rev{display:inline-flex;align-items:center;gap:14px;width:max-content;max-width:330px;background:rgba(16,17,22,.55);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 19px 12px 12px;backdrop-filter:blur(18px);box-shadow:0 16px 40px rgba(0,0,0,.36);
  opacity:0;transform:translateY(22px) scale(.97);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #work .pp-rev:nth-child(2){transition-delay:.1s;}
#wdi-ux-page #work .pp-card.in .pp-rev{opacity:1;transform:none;}
#wdi-ux-page #work .pp-rev-badge{height:54px;width:auto;flex:none;display:block;border-radius:8px;background:#fff;}
#wdi-ux-page #work .pp-rev-google .pp-rev-mk{width:48px;height:48px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 2px 10px rgba(0,0,0,.2);}
#wdi-ux-page #work .pp-rev-google .pp-rev-mk svg{width:27px;height:27px;display:block;}
#wdi-ux-page #work .pp-rev-in{display:flex;flex-direction:column;gap:6px;line-height:1;}
#wdi-ux-page #work .pp-rev-q{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-0.015em;line-height:1.18;}
#wdi-ux-page #work .pp-rev-meta{display:inline-flex;align-items:center;gap:9px;}
#wdi-ux-page #work .pp-rev .st{display:inline-flex;gap:1.5px;color:#FFC53D;}
#wdi-ux-page #work .pp-rev .st svg{width:12px;height:12px;}
#wdi-ux-page #work .pp-rev-meta i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);}
#wdi-ux-page #work 
.pp-cta{position:relative;width:100vw;left:50%;transform:translateX(-50%);min-height:100vh;display:grid;place-items:center;overflow:hidden;
  background:var(--bg);scroll-snap-align:start;scroll-snap-stop:always;text-align:center;}
#wdi-ux-page #work .pp-cta-aura{position:absolute;width:780px;height:780px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(249,47,100,.16),rgba(122,0,255,.13),rgba(0,200,255,.07),rgba(255,179,0,.1),rgba(249,47,100,.16));
  filter:blur(90px);opacity:.6;animation:ppCtaSpin 26s linear infinite;}
@keyframes ppCtaSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
#wdi-ux-page #work .pp-cta-dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(11,12,14,.07) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);}
#wdi-ux-page #work .pp-cta-in{position:relative;z-index:2;max-width:760px;padding:0 40px;}
#wdi-ux-page #work .pp-cta-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);
  opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #work .pp-cta-eyebrow .lvdot{width:7px;height:7px;border-radius:50%;background:var(--rose-500);box-shadow:0 0 0 0 rgba(249,47,100,.5);animation:ppCtaPulse 2.4s ease-out infinite;}
@keyframes ppCtaPulse{0%{box-shadow:0 0 0 0 rgba(249,47,100,.5);}70%{box-shadow:0 0 0 8px rgba(249,47,100,0);}100%{box-shadow:0 0 0 0 rgba(249,47,100,0);}}
#wdi-ux-page #work .pp-cta-h{margin-top:24px;font-size:clamp(40px,5.6vw,76px);font-weight:600;letter-spacing:-0.04em;line-height:.98;color:var(--ink);text-wrap:balance;
  opacity:0;transform:translateY(28px);transition:opacity .8s ease .08s,transform .9s cubic-bezier(.2,.7,.2,1) .08s;}
#wdi-ux-page #work .pp-cta-h em{font-style:normal;background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page #work .pp-cta-p{margin:24px auto 0;max-width:56ch;font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.55;color:var(--ink-2);
  opacity:0;transform:translateY(24px);transition:opacity .8s ease .16s,transform .9s cubic-bezier(.2,.7,.2,1) .16s;}
#wdi-ux-page #work .pp-cta-actions{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  opacity:0;transform:translateY(22px);transition:opacity .8s ease .24s,transform .9s cubic-bezier(.2,.7,.2,1) .24s;}
#wdi-ux-page #work .pp-cta-btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--font);font-size:15px;font-weight:500;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:15px 16px 15px 26px;text-decoration:none;transition:transform .25s,background .25s,box-shadow .3s;}
#wdi-ux-page #work .pp-cta-btn .ar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;transition:background .3s,transform .3s;}
#wdi-ux-page #work .pp-cta-btn .ar svg{width:16px;height:16px;}
#wdi-ux-page #work .pp-cta-btn:hover{background:var(--rose-600);border-color:var(--rose-600);transform:translateY(-2px);box-shadow:0 16px 36px rgba(228,18,82,.3);}
#wdi-ux-page #work .pp-cta-btn:hover .ar{transform:translateX(2px);}
#wdi-ux-page #work .pp-cta-ghost{display:inline-flex;align-items:center;font-family:var(--font);font-size:15px;font-weight:500;color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:15px 24px;text-decoration:none;transition:border-color .25s,transform .25s;}
#wdi-ux-page #work .pp-cta-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
#wdi-ux-page #work .pp-cta-stats{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;
  opacity:0;transform:translateY(20px);transition:opacity .8s ease .32s,transform .9s cubic-bezier(.2,.7,.2,1) .32s;}
#wdi-ux-page #work .pp-cta-stats .s b{font-size:28px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
#wdi-ux-page #work .pp-cta-stats .s span{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--muted);}
#wdi-ux-page #work .pp-cta-stats .d{width:1px;height:32px;background:var(--line-2);}
#wdi-ux-page #work .pp-cta.in .pp-cta-eyebrow,#wdi-ux-page #work .pp-cta.in .pp-cta-h,#wdi-ux-page #work .pp-cta.in .pp-cta-p,#wdi-ux-page #work .pp-cta.in .pp-cta-actions,#wdi-ux-page #work .pp-cta.in .pp-cta-stats{opacity:1;transform:none;}
@media(max-width:760px){#wdi-ux-page #work .pp-cta{min-height:auto;padding:90px 0;}#wdi-ux-page #work .pp-cta-stats{gap:18px;}#wdi-ux-page #work .pp-cta-stats .d{display:none;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #work .pp-cta-aura{animation:none;}#wdi-ux-page #work .pp-cta .pp-cta-in *{opacity:1!important;transform:none!important;}}
#wdi-ux-page #work 
.pp-device{position:absolute;right:6%;top:32%;z-index:2;height:58%;width:auto;max-width:42%;object-fit:contain;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));opacity:0;transform:translateY(calc(-50% + 40px)) scale(.97);
  transition:opacity .9s ease .15s,transform 1s cubic-bezier(.2,.7,.2,1) .15s;pointer-events:none;}
#wdi-ux-page #work .pp-card.in .pp-device{opacity:1;transform:translateY(-50%);}
#wdi-ux-page #work 
@media(min-width:761px) and (max-width:1080px){
  #wdi-ux-page .pp-row{max-width:46%;}
  #wdi-ux-page .pp-rev{max-width:240px;padding:10px 15px 10px 10px;gap:11px;}
  #wdi-ux-page .pp-rev-badge{height:46px;}
  #wdi-ux-page .pp-rev-google .pp-rev-mk{width:42px;height:42px;}
  #wdi-ux-page .pp-rev-q{font-size:13.5px;}
  #wdi-ux-page .pp-keystat-h{font-size:clamp(16px,1.9vw,20px);max-width:16ch;}
}
@media(max-width:760px){#wdi-ux-page #work .pp-device{position:relative;right:auto;top:auto;height:auto;max-width:74%;margin:24px auto -10px;display:block;transform:none;}#wdi-ux-page #work .pp-card.in .pp-device{transform:none;}}
@media(max-width:760px){
  #wdi-ux-page #work .pp-hero{padding:80px 0 60px;}
  #wdi-ux-page #work .pp-band{padding:90px 0;}
  /* Keep sticky overlap on mobile — do not collapse cards to auto height */
  #wdi-ux-page #work .pp-card{height:100svh;min-height:100svh;max-height:none;}
  #wdi-ux-page #work .pp-media{position:absolute;inset:0;height:100%;}
  #wdi-ux-page #work .pp-content{position:absolute;left:0;right:0;bottom:0;background:transparent;}
  #wdi-ux-page #work .pp-content-in{padding:30px 22px 44px;}
  #wdi-ux-page #work .pp-vind,#wdi-ux-page #work .pp-index{display:none;}
  #wdi-ux-page #work .pp-name{opacity:1;transform:none;}
  #wdi-ux-page #work .pp-keystat{top:62px;left:0;transform:none;padding:0 22px;align-items:flex-end;text-align:right;}
  #wdi-ux-page #work .pp-keystat-h{font-size:19px;max-width:16ch;}
  #wdi-ux-page #work .pp-mcaps{display:none;}
  #wdi-ux-page #work .pp-reviews{position:absolute;left:0;right:0;bottom:0;transform:none;width:auto;max-width:none;padding:0 22px 30px;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;background:transparent;margin-top:0;}
  #wdi-ux-page #work .pp-rev{max-width:none;width:100%;}
}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #work .pp-band-track,#wdi-ux-page #work .pp-band::before{animation:none;}#wdi-ux-page #work .pp-media img,#wdi-ux-page #work .pp-media video{animation:none!important;transform:none;}#wdi-ux-page #work .pp-card .pp-content *{opacity:1!important;transform:none!important;}}
#wdi-ux-page #work 
.pp-awards{position:relative;background:var(--bg);border-top:1px solid var(--line);padding:96px 0 100px;overflow:hidden;}
#wdi-ux-page #work .pp-awards-head{text-align:center;max-width:720px;margin:0 auto 52px;}
#wdi-ux-page #work .pp-awards-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page #work .pp-awards-h{margin-top:18px;font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);text-wrap:balance;}
#wdi-ux-page #work .pp-awards-sub{margin-top:18px;font-size:clamp(15px,1.3vw,17px);font-weight:300;line-height:1.55;color:var(--muted);}
#wdi-ux-page #work .pp-awards-strip{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
#wdi-ux-page #work .pp-awards-rail{display:flex;align-items:center;gap:64px;width:max-content;animation:ppAwardRoll 42s linear infinite;}
#wdi-ux-page #work .pp-awards-strip:hover .pp-awards-rail{animation-play-state:paused;}
@keyframes ppAwardRoll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
#wdi-ux-page #work .pp-award{flex:none;display:flex;align-items:center;gap:13px;color:#AEB3BB;transition:color .35s ease,filter .35s ease,transform .35s ease;}
#wdi-ux-page #work .pp-award .medal{width:26px;height:26px;flex:none;color:inherit;}
#wdi-ux-page #work .pp-award .medal svg{width:100%;height:100%;}
#wdi-ux-page #work .pp-award .by{font-size:24px;font-weight:600;letter-spacing:-0.02em;white-space:nowrap;}
#wdi-ux-page #work .pp-award .rt{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:inherit;opacity:.8;}
#wdi-ux-page #work .pp-award .rt svg{width:13px;height:13px;}
#wdi-ux-page #work .pp-award:hover{color:var(--ink);filter:drop-shadow(0 0 16px rgba(249,47,100,.25));transform:translateY(-1px);}
#wdi-ux-page #work .pp-award:hover .rt{color:var(--rose-600);opacity:1;}
#wdi-ux-page #work .pp-awards-micro{margin:50px auto 0;text-align:center;max-width:60ch;font-size:14px;font-weight:400;line-height:1.6;color:var(--muted);}
@media(max-width:760px){#wdi-ux-page #work .pp-awards{padding:70px 0 78px;}#wdi-ux-page #work .pp-awards-rail{gap:44px;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #work .pp-awards-rail{animation:none;}}
#wdi-ux-page #work 
.tsb-tile .av{display:grid;place-items:center;background:linear-gradient(135deg,var(--rose-500),var(--violet));overflow:hidden;}
#wdi-ux-page #work .tsb-tile .av span{font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff;}
#wdi-ux-page #work .pp-mini{position:relative;width:100vw;left:50%;transform:translateX(-50%);min-height:88vh;display:grid;place-items:center;text-align:center;overflow:hidden;background:#08090c;border-top:1px solid rgba(255,255,255,.06);}
#wdi-ux-page #work .pp-mini-aura{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;background:radial-gradient(40% 60% at 22% 32%,rgba(249,47,100,.42),transparent 60%),radial-gradient(40% 60% at 80% 68%,rgba(122,0,255,.4),transparent 62%),radial-gradient(50% 50% at 50% 50%,rgba(0,200,255,.08),transparent 60%);filter:blur(60px);opacity:.7;animation:ppMiniDrift 18s ease-in-out infinite alternate;}
@keyframes ppMiniDrift{0%{transform:translate(-3%,-2%) scale(1);}100%{transform:translate(3%,2%) scale(1.08);}}
#wdi-ux-page #work .pp-mini-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 45%,#000,transparent 82%);mask-image:radial-gradient(75% 75% at 50% 45%,#000,transparent 82%);}
#wdi-ux-page #work .pp-mini-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,rgba(8,9,12,.6),rgba(8,9,12,0) 30%,rgba(8,9,12,0) 70%,rgba(8,9,12,.7));}
#wdi-ux-page #work .pp-mini-in{position:relative;z-index:2;max-width:880px;padding:0 40px;display:flex;flex-direction:column;align-items:center;}
#wdi-ux-page #work .pp-mini-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page #work .pp-mini-eyebrow .lvdot{width:7px;height:7px;border-radius:50%;background:var(--rose-400);box-shadow:0 0 10px var(--rose-400);animation:ppCtaPulse 2.4s ease-out infinite;}
#wdi-ux-page #work .pp-mini-h{margin-top:26px;font-size:clamp(42px,7vw,104px);font-weight:600;letter-spacing:-0.045em;line-height:.96;color:#fff;text-wrap:balance;}
#wdi-ux-page #work .pp-mini-h em{font-style:normal;background:linear-gradient(110deg,var(--rose-400),var(--violet-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page #work .pp-mini-p{margin:28px auto 0;max-width:52ch;font-size:clamp(16px,1.5vw,20px);font-weight:300;line-height:1.55;color:rgba(255,255,255,.74);}
#wdi-ux-page #work .pp-mini-btn{margin-top:42px;display:inline-flex;align-items:center;gap:13px;font-family:var(--font);font-size:16px;font-weight:500;color:#0B0C0E;background:#fff;border:1px solid #fff;border-radius:999px;padding:18px 20px 18px 32px;text-decoration:none;transition:transform .25s,box-shadow .3s;}
#wdi-ux-page #work .pp-mini-btn .ar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));color:#fff;display:grid;place-items:center;transition:transform .3s;}
#wdi-ux-page #work .pp-mini-btn .ar svg{width:18px;height:18px;}
#wdi-ux-page #work .pp-mini-btn:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(228,18,82,.34);}
#wdi-ux-page #work .pp-mini-btn:hover .ar{transform:translateX(3px) rotate(-8deg);}
@media(max-width:760px){#wdi-ux-page #work .pp-mini{min-height:0;padding:90px 0;}#wdi-ux-page #work .pp-mini-btn{width:100%;justify-content:center;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #work .pp-mini-aura{animation:none;}}
#wdi-ux-page #work .pp-foot{background:#0B0C0E;color:rgba(255,255,255,.7);padding:64px 0 30px;}
#wdi-ux-page #work .pp-foot-in{display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap;}
#wdi-ux-page #work .pp-foot-brand img{height:30px;width:auto;}
#wdi-ux-page #work .pp-foot-brand p{margin-top:16px;max-width:34ch;font-size:14px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.6);}
#wdi-ux-page #work .pp-foot-cols{display:flex;gap:60px;flex-wrap:wrap;}
#wdi-ux-page #work .pp-foot-cols b{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;margin-bottom:14px;}
#wdi-ux-page #work .pp-foot-cols a{display:block;font-size:14px;font-weight:300;color:rgba(255,255,255,.62);text-decoration:none;margin-bottom:10px;transition:color .2s;}
#wdi-ux-page #work .pp-foot-cols a:hover{color:var(--rose-400);}
#wdi-ux-page #work .pp-foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45);}
@media(max-width:760px){#wdi-ux-page #work .pp-mini-in{padding:26px;}#wdi-ux-page #work .pp-mini .pp-cta-btn{width:100%;justify-content:center;}}
#wdi-ux-page #work 
.iw-sec{position:relative;padding:110px 0 130px;background:var(--bg-2);border-top:1px solid var(--line);}
#wdi-ux-page #work .iw-head{text-align:center;max-width:720px;margin:0 auto 56px;}
#wdi-ux-page #work .iw-head .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page #work .iw-head .eyebrow::before,#wdi-ux-page #work .iw-head .eyebrow::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--rose-400));}
#wdi-ux-page #work .iw-head .eyebrow::after{background:linear-gradient(90deg,var(--rose-400),transparent);}
#wdi-ux-page #work .iw-head h2{margin-top:22px;font-size:clamp(32px,4.4vw,58px);font-weight:600;letter-spacing:-0.04em;line-height:1;color:var(--ink);}
#wdi-ux-page #work .iw-head h2 .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page #work .iw-head p{margin-top:18px;font-size:16px;font-weight:300;line-height:1.55;color:var(--muted);}
#wdi-ux-page #work .iw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
#wdi-ux-page #work .iw-item{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);}
#wdi-ux-page #work .iw-sec.in .iw-item{opacity:1;transform:none;}
#wdi-ux-page #work 
.iw-card{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:#0c0d11;border:1px solid var(--line);
  display:grid;place-items:center;transition:border-color .35s,box-shadow .35s,transform .4s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #work .iw-card::before{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(110% 90% at 18% 12%,color-mix(in srgb,var(--hue,#39E07B) 32%,transparent),transparent 58%),
  radial-gradient(100% 90% at 88% 90%,rgba(249,47,100,.32),transparent 60%),
  linear-gradient(155deg,#16181d,#0a0b0e);transition:transform .9s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #work .iw-card::after{content:"";position:absolute;inset:0;z-index:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 45%,#000,transparent 82%);mask-image:radial-gradient(75% 75% at 50% 45%,#000,transparent 82%);}
#wdi-ux-page #work .iw-item:hover .iw-card{border-color:var(--rose-300);transform:translateY(-5px);box-shadow:0 24px 50px rgba(11,12,14,.16);}
#wdi-ux-page #work .iw-item:hover .iw-card::before{transform:scale(1.08);}
#wdi-ux-page #work 
.iw-tag{position:absolute;left:16px;top:16px;z-index:2;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 11px;backdrop-filter:blur(6px);}
#wdi-ux-page #work 
.iw-status{position:absolute;right:16px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);}
#wdi-ux-page #work .iw-status .lvdot{width:6px;height:6px;border-radius:50%;background:var(--hue,#39E07B);box-shadow:0 0 8px var(--hue,#39E07B);animation:iwPulse 2.2s ease-out infinite;}
@keyframes iwPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hue,#39E07B) 60%,transparent);}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
#wdi-ux-page #work 
.iw-lock{position:relative;z-index:1;display:flex;align-items:center;gap:18px;}
#wdi-ux-page #work .iw-lock .wdi{height:30px;width:auto;}
#wdi-ux-page #work .iw-lock .x{font-size:18px;font-weight:300;color:rgba(255,255,255,.45);}
#wdi-ux-page #work .iw-lock .proj{font-size:24px;font-weight:700;letter-spacing:-0.02em;color:#fff;}
#wdi-ux-page #work .iw-lock .proj em{font-style:normal;color:var(--hue,#39E07B);}
#wdi-ux-page #work 
.iw-meta{margin-top:18px;padding:0 4px;}
#wdi-ux-page #work .iw-name{font-size:18px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
#wdi-ux-page #work .iw-desc{margin-top:7px;font-size:13.5px;font-weight:300;line-height:1.5;color:var(--muted);}
@media(max-width:980px){#wdi-ux-page #work .iw-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#wdi-ux-page #work .iw-grid{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #work .iw-item{opacity:1!important;transform:none!important;}#wdi-ux-page #work .iw-status .lvdot{animation:none;}}
#wdi-ux-page #work 
.ts-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page #work .ts-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));box-shadow:0 0 10px rgba(249,47,100,.5);}
#wdi-ux-page #work .ts-h{margin-top:22px;font-size:clamp(32px,3.8vw,52px);line-height:1.04;font-weight:500;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;}
#wdi-ux-page #work .ts-sub{margin-top:20px;font-size:clamp(15px,1.25vw,17.5px);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:54ch;}
#wdi-ux-page #work .ts-key{
  position:relative;
  background:linear-gradient(120deg,var(--rose-600),var(--violet) 50%,var(--rose-400));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:600;
  animation:tsKeyShift 6s ease-in-out infinite,tsKeyGlow 4.5s ease-in-out infinite;
}
@keyframes tsKeyShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@keyframes tsKeyGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(249,47,100,0)) drop-shadow(0 0 0 rgba(122,0,255,0));}
  50%{filter:drop-shadow(0 0 10px rgba(249,47,100,.55)) drop-shadow(0 0 18px rgba(122,0,255,.35));}
}
#wdi-ux-page #work 
.tsb-sec{padding:100px 0 130px;background:var(--bg);border-top:1px solid var(--line);}
#wdi-ux-page #work .tsb-head{text-align:center;max-width:680px;margin:0 auto 56px;}
#wdi-ux-page #work .tsb-head .ts-h .accent{color:var(--rose-600);}
#wdi-ux-page #work .tsb-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:14px;}
#wdi-ux-page #work .tsb-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:24px 26px;border:1px solid var(--line);border-radius:18px;background:var(--bg);transition:border-color .35s,box-shadow .35s,transform .35s;}
#wdi-ux-page #work .tsb-tile:hover{border-color:var(--rose-300);transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,12,14,.06);}
#wdi-ux-page #work .tsb-tile .quote{font-size:15px;font-weight:400;line-height:1.5;color:var(--ink);}
#wdi-ux-page #work .tsb-tile .author{margin-top:18px;display:flex;align-items:center;gap:11px;}
#wdi-ux-page #work .tsb-tile .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#eee;flex:none;}
#wdi-ux-page #work .tsb-tile .av img{width:100%;height:100%;object-fit:cover;}
#wdi-ux-page #work .tsb-tile .name{font-size:13px;font-weight:500;color:var(--ink);}
#wdi-ux-page #work .tsb-tile .role{margin-top:1px;font-size:11.5px;color:var(--muted);}
#wdi-ux-page #work .tsb-tile.dark{background:linear-gradient(160deg,#0E0F12,#16181E);color:#fff;border-color:transparent;}
#wdi-ux-page #work .tsb-tile.dark .quote,#wdi-ux-page #work .tsb-tile.dark .name{color:#fff;}
#wdi-ux-page #work .tsb-tile.dark .role{color:rgba(255,255,255,.6);}
#wdi-ux-page #work .tsb-tile.lg{grid-column:span 4;grid-row:span 2;}
#wdi-ux-page #work .tsb-tile.md{grid-column:span 3;}
#wdi-ux-page #work .tsb-tile.sm{grid-column:span 2;}
#wdi-ux-page #work .tsb-tile.lg .quote{font-size:21px;font-weight:500;letter-spacing:-0.015em;line-height:1.4;}
#wdi-ux-page #work .tsb-tile.md .quote{font-size:16.5px;}
/* sticky card stack — each card pins while the next slides over it */
#wdi-ux-page #work #ppStack{position:relative;}
#wdi-ux-page #work .pp-card{position:sticky;top:0;height:100vh;min-height:100vh;overflow:hidden;
  scroll-snap-align:none;scroll-snap-stop:normal;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #work .pp-card{position:relative;height:auto;min-height:0;}}

/* ============================================================
   WDI — T05 Category Landing
   Template-level styles shared by every category implementation
   (Mobile Application Development, Web Development, Design
   Services, Software Development, industry categories).
   Section modules keep their own stylesheets; this file only
   adds the template-specific pieces.
   ============================================================ */

/* ---- platform / development-path comparison (Section 11) ---- */
#wdi-ux-page .t05-cmp{background:var(--bg-2);}
#wdi-ux-page .t05-cmp-table{max-width:1180px;margin:0 auto;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;}
#wdi-ux-page .t05-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
#wdi-ux-page .t05-cmp-grid{min-width:940px;display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1fr;}
#wdi-ux-page .t05-cmp-grid > div{padding:16px 18px;border-top:1px solid var(--line);border-left:1px solid var(--line);font-size:13.5px;font-weight:300;line-height:1.55;color:var(--muted);}
#wdi-ux-page .t05-cmp-grid > div:nth-child(5n+1){border-left:none;font-weight:500;color:var(--ink);background:var(--bg-2);}
#wdi-ux-page .t05-cmp-grid > .t05-cmp-hd{border-top:none;background:#fff;font-size:13px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);padding-top:20px;padding-bottom:20px;}
#wdi-ux-page .t05-cmp-grid > .t05-cmp-hd:first-child{background:#fff;}
#wdi-ux-page .t05-cmp-hd span{display:block;margin-top:5px;font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .t05-cmp-note{max-width:1180px;margin:20px auto 0;display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--rose-500);border-radius:16px;padding:20px 24px;}
#wdi-ux-page .t05-cmp-note svg{width:20px;height:20px;flex:none;color:var(--rose-600);margin-top:2px;}
#wdi-ux-page .t05-cmp-note p{margin:0;font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-2);}
#wdi-ux-page .t05-cmp-cta{max-width:1180px;margin:26px auto 0;display:flex;justify-content:center;}
@media(max-width:860px){#wdi-ux-page .t05-cmp-hint{display:block;}}
#wdi-ux-page .t05-cmp-hint{display:none;margin:0 auto 12px;max-width:1180px;font-size:12.5px;color:var(--muted);}

/* ---- breadcrumb in the dark hero ---- */
#wdi-ux-page .hb1-crumb ol{margin:0;padding:0;}

/* ---- engagement models: three-model layout ---- */

/* ---- category proof strip: only verified metrics render ---- */
#wdi-ux-page .t05-proof-metrics{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(24px,4vw,60px);margin-top:clamp(24px,3vw,36px);}
#wdi-ux-page .t05-proof-metric{text-align:center;}
#wdi-ux-page .t05-proof-metric b{display:block;font-size:clamp(26px,3vw,40px);font-weight:400;letter-spacing:-0.04em;color:var(--ink);font-feature-settings:"tnum" 1;}
#wdi-ux-page .t05-proof-metric span{display:block;margin-top:6px;font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
#wdi-ux-page .t05-proof-metric[data-verified="false"]{display:none;}

/* ---- mini CTA band (portfolio V2 pattern, compact) ---- */
#wdi-ux-page .t05-mini{padding:clamp(72px,8vw,96px) 0;}
#wdi-ux-page .t05-mini h2{font-size:clamp(26px,3.4vw,44px);}
#wdi-ux-page .t05-mini p{max-width:56ch;font-size:clamp(15px,1.3vw,17px);}
#wdi-ux-page .t05-mini-cta{margin-top:30px;display:flex;justify-content:center;}

/* ---- technology tabs: show all categories, no horizontal scroll ---- */
#wdi-ux-page #tech-b .teb-tabs{display:flex;flex-wrap:wrap;justify-content:center;overflow:visible!important;gap:10px;}
#wdi-ux-page #tech-b .teb-tabs::-webkit-scrollbar{display:none;}
#wdi-ux-page #tech-b .teb-tab{flex:0 0 auto;white-space:normal;}

/* ---- selected work: keep the sticky stack aligned to the page grid ---- */

/* the source stack centres cards with a JS transform tuned to its own page width; neutralise it here */

/* ---- selected work: edge-to-edge full-height sticky stack ---- */
#wdi-ux-page #work{padding-left:0;padding-right:0;overflow:visible!important;content-visibility:visible!important;}
#wdi-ux-page #work .pp-stack,#wdi-ux-page #work #ppStack{position:relative;width:100%;max-width:none;margin:0;padding:0;overflow:visible!important;}
#wdi-ux-page #work .pp-card{position:sticky;top:0;left:auto!important;right:auto!important;transform:none!important;
  width:100%;max-width:none;height:100vh;min-height:100vh;overflow:hidden;border-radius:0;
  background:#08090c;isolation:isolate;}
#wdi-ux-page #work .pp-card:nth-child(1){z-index:1;}
#wdi-ux-page #work .pp-card:nth-child(2){z-index:2;}
#wdi-ux-page #work .pp-card:nth-child(3){z-index:3;}
#wdi-ux-page #work .pp-card:nth-child(4){z-index:4;}
#wdi-ux-page #work .pp-card:nth-child(5){z-index:5;}
#wdi-ux-page #work .pp-card:nth-child(6){z-index:6;}
#wdi-ux-page #work .pp-card:nth-child(n+7){z-index:7;}
#wdi-ux-page #work .pp-media{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
#wdi-ux-page #work .pp-media img,#wdi-ux-page #work .pp-media video{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:cover!important;display:block;opacity:1;visibility:visible;
}
/* Unarmed lazy video paints over the still and hides the stack imagery */
#wdi-ux-page #work .pp-media video.pp-lazy-vid:not([data-ready]){display:none!important;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #work .pp-card{position:relative;height:auto;min-height:60vh;}}
/* Mobile: keep sticky overlapping stack (full viewport cards + edge-to-edge media) */
@media(max-width:860px){
  #wdi-ux-page #work .pp-card{
    position:sticky!important;top:0!important;
    height:100svh!important;min-height:100svh!important;max-height:none!important;
    left:auto!important;right:auto!important;transform:none!important;width:100%!important;
    overflow:hidden!important;
  }
  #wdi-ux-page #work .pp-media{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    min-height:0!important;display:block;overflow:hidden;z-index:0;
  }
  #wdi-ux-page #work .pp-media img,#wdi-ux-page #work .pp-media video{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    max-width:none!important;object-fit:cover!important;opacity:1!important;visibility:visible!important;
  }
  #wdi-ux-page #work .pp-content{
    position:absolute!important;left:0;right:0;bottom:0;z-index:3;background:transparent!important;
  }
  #wdi-ux-page #work .pp-content-in{padding:28px 20px 40px;}
  #wdi-ux-page #work .pp-keystat{top:56px;left:0!important;transform:none!important;padding:0 20px;}
  #wdi-ux-page #work .pp-reviews{
    position:absolute!important;left:0;right:0;bottom:0;transform:none!important;
    width:auto;max-width:none;padding:0 20px 24px;align-items:stretch;background:transparent!important;
  }
  #wdi-ux-page #work .pp-name{font-size:clamp(34px,10vw,52px)!important;}
  #wdi-ux-page #work .pp-tagline{font-size:clamp(16px,4.2vw,20px)!important;}
  #wdi-ux-page #work .pp-desc{font-size:14.5px!important;max-width:42ch;}
}

/* ---- technology marquee: give the left panel more room ---- */
#wdi-ux-page #tech-a .tea-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr)!important;gap:clamp(32px,4.5vw,72px);align-items:center;}
#wdi-ux-page #tech-a .tea-left{max-width:none;}
#wdi-ux-page #tech-a .te-h{font-size:clamp(28px,3vw,44px);line-height:1.08;}
#wdi-ux-page #tech-a .te-sub{max-width:46ch;}
@media(max-width:960px){#wdi-ux-page #tech-a .tea-grid{grid-template-columns:1fr!important;}}


/* ============================================================
   T05 v2 — every section header inherits the hero's type
   treatment (Figtree 400, -0.045em tracking, 1.0 leading)
   ============================================================ */
#wdi-ux-page #hero ~ * .sec-h,
#wdi-ux-page #hero ~ * .uc-h,
#wdi-ux-page #hero ~ * .svv-h,
#wdi-ux-page #hero ~ * .sv4-h,
#wdi-ux-page #hero ~ * .sv5-h,
#wdi-ux-page #hero ~ * .pr-h,
#wdi-ux-page #hero ~ * .sa-h,
#wdi-ux-page #hero ~ * .chal-h,
#wdi-ux-page #hero ~ * .fq-h,
#wdi-ux-page #hero ~ * .cs-h,
#wdi-ux-page #hero ~ * .ts-h,
#wdi-ux-page #hero ~ * .lp-eco-h,
#wdi-ux-page #hero ~ * .lp-h,
#wdi-ux-page #hero ~ * .teb-h,
#wdi-ux-page #hero ~ * .tea-h,
#wdi-ux-page #hero ~ * .ivv-h,
#wdi-ux-page #hero ~ * .eng-h,
#wdi-ux-page #hero ~ * .ava-h,
#wdi-ux-page #hero ~ * .pfd-h,
#wdi-ux-page #hero ~ * .piw-h,
#wdi-ux-page #hero ~ * .lp-final-h,
#wdi-ux-page #hero ~ * .t02-cta-band h2{
  font-family:var(--font)!important;
  font-weight:400!important;
  letter-spacing:-0.045em!important;
  line-height:1.06!important;
  font-size:clamp(30px,3.9vw,56px)!important;
  text-wrap:balance;}
/* accent words keep the same weight as the hero's accent */
#wdi-ux-page #hero ~ * .sec-h .accent,
#wdi-ux-page #hero ~ * .lp-h .amp,
#wdi-ux-page #hero ~ * .ts-h .accent,
#wdi-ux-page #hero ~ * .lp-final-h em,
#wdi-ux-page #hero ~ * .t02-cta-band h2 em{font-weight:400!important;font-style:normal;}
/* uniform eyebrows above every header */
#wdi-ux-page #hero ~ * .eyebrow-2,
#wdi-ux-page #hero ~ * .uc-eyebrow,
#wdi-ux-page #hero ~ * .svv-eyebrow,
#wdi-ux-page #hero ~ * .pr-eyebrow,
#wdi-ux-page #hero ~ * .sa-eyebrow,
#wdi-ux-page #hero ~ * .chal-eyebrow,
#wdi-ux-page #hero ~ * .fq-eyebrow,
#wdi-ux-page #hero ~ * .cs-eyebrow,
#wdi-ux-page #hero ~ * .ts-eyebrow,
#wdi-ux-page #hero ~ * .lp-eyebrow,
#wdi-ux-page #hero ~ * .ava-eyebrow,
#wdi-ux-page #hero ~ * .pfd-eyebrow,
#wdi-ux-page #hero ~ * .teb-eyebrow,
#wdi-ux-page #hero ~ * .tea-eyebrow{
  font-family:var(--font)!important;font-size:12.5px!important;font-weight:600!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;}


/* T05 v2 — catch section-level headers that are siblings of #hero, not
   descendants of siblings, plus the classes missed in the first pass. */
#wdi-ux-page section.t02-cta-band h2,
#wdi-ux-page section#work h2,
#wdi-ux-page section.pp-band h2,
#wdi-ux-page section .te-h,
#wdi-ux-page section .tea-h,
#wdi-ux-page section .teb-h,
#wdi-ux-page section .rs-h,
#wdi-ux-page section .avv-h,
#wdi-ux-page section .ava-h{
  font-family:var(--font)!important;
  font-weight:400!important;
  letter-spacing:-0.045em!important;
  line-height:1.06!important;
  font-size:clamp(30px,3.9vw,56px)!important;
  text-wrap:balance;}
#wdi-ux-page section.t02-cta-band h2 em,
#wdi-ux-page section.pp-band h2 em,
#wdi-ux-page section#work h2 em{font-weight:400!important;font-style:normal;}
#wdi-ux-page section .te-eyebrow,
#wdi-ux-page section .rs-eyebrow,
#wdi-ux-page section .pp-band .tag{
  font-family:var(--font)!important;font-size:12.5px!important;font-weight:600!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;}

/* ============================================================
   WDI — Interstitial CTA bands (portfolio "Who we are" style)
   Dark band, two oversized faded marquee lines drifting in
   opposite directions, drifting rose/violet glow, centred copy.
   ============================================================ */
#wdi-ux-page .t02-cta-band{position:relative;padding:clamp(84px,10vw,124px) 0;overflow:hidden;
  background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;}
#wdi-ux-page .t02-cta-band-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:0;
  pointer-events:none;white-space:nowrap;font-size:clamp(80px,15vw,240px);font-weight:700;
  letter-spacing:-0.04em;line-height:1;color:rgba(255,255,255,.045);
  -webkit-text-stroke:1px rgba(255,255,255,.04);will-change:transform;}
#wdi-ux-page .t02-cta-band-track.r1{animation:t02BandL 34s linear infinite;top:32%;}
#wdi-ux-page .t02-cta-band-track.r2{animation:t02BandR 40s linear infinite;top:70%;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.06);}
@keyframes t02BandL{from{transform:translate(0,-50%);}to{transform:translate(-50%,-50%);}}
@keyframes t02BandR{from{transform:translate(-50%,-50%);}to{transform:translate(0,-50%);}}
#wdi-ux-page .t02-cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 60% at 20% 30%,rgba(249,47,100,.16),transparent 60%),
             radial-gradient(40% 60% at 82% 72%,rgba(122,0,255,.16),transparent 60%);
  filter:blur(20px);animation:t02BandGlow 16s ease-in-out infinite alternate;}
@keyframes t02BandGlow{from{transform:translateX(-3%);}to{transform:translateX(3%);}}
#wdi-ux-page .t02-cta-band-in{position:relative;z-index:2;text-align:center;max-width:940px;margin:0 auto;
  padding:0 clamp(22px,5vw,56px);}
#wdi-ux-page .t02-cta-band .tag{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page .t02-cta-band .tag .lvdot{width:7px;height:7px;border-radius:50%;background:var(--rose-400);
  box-shadow:0 0 0 0 rgba(249,47,100,.6);animation:t02BandPulse 2.4s ease-out infinite;}
@keyframes t02BandPulse{0%{box-shadow:0 0 0 0 rgba(249,47,100,.55);}70%{box-shadow:0 0 0 8px rgba(249,47,100,0);}100%{box-shadow:0 0 0 0 rgba(249,47,100,0);}}
#wdi-ux-page .t02-cta-band h2{margin-top:18px;font-size:clamp(28px,3.6vw,46px);font-weight:600;
  letter-spacing:-0.035em;line-height:1.08;color:#fff;text-wrap:balance;}
#wdi-ux-page .t02-cta-band h2 em{font-style:normal;background:linear-gradient(110deg,var(--rose-400),var(--violet-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .t02-cta-band p{margin:16px auto 0;max-width:62ch;font-size:16px;font-weight:300;line-height:1.6;
  color:rgba(255,255,255,.66);}
#wdi-ux-page .t02-cta-band-actions{margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .t02-cta-band-actions .lp-btn-primary{border:1.5px solid rgba(255,255,255,.85);}
#wdi-ux-page .t02-cta-band-actions .lp-btn-primary:hover{border-color:var(--rose-500);}
#wdi-ux-page .t02-cta-band-actions .lp-btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);}
#wdi-ux-page .t02-cta-band-actions .lp-btn-ghost:hover{border-color:var(--rose-400);color:var(--rose-300);}
@media(max-width:760px){#wdi-ux-page .t02-cta-band{padding:72px 0;}}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .t02-cta-band-track,#wdi-ux-page .t02-cta-band::before,#wdi-ux-page .t02-cta-band .tag .lvdot{animation:none;}
}

/* ============================================================
   WDI — Section Guide marker
   The fixed element IS the 44px core; the label is absolutely
   positioned inboard of it and the thread lives inside the core,
   so anchoring is exact on both edges.
   ============================================================ */
#wdi-ux-page .wdi-guide{position:fixed;top:0;left:0;z-index:130;pointer-events:none;
  width:44px;height:44px;opacity:0;transition:opacity .5s ease;will-change:transform;}
#wdi-ux-page .wdi-guide.is-on{opacity:1;}
#wdi-ux-page .wdi-guide.is-hidden{opacity:0;}

/* core disc */
#wdi-ux-page .wdi-guide-core{position:relative;width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 6px 22px rgba(11,12,14,.14),0 0 0 1px rgba(11,12,14,.06);
  backdrop-filter:saturate(140%) blur(10px);}
#wdi-ux-page .wdi-guide-core svg{position:absolute;inset:0;width:44px;height:44px;}
#wdi-ux-page .wdi-guide-core .g-ring{fill:none;stroke:rgba(11,12,14,.1);stroke-width:1.6;}
#wdi-ux-page .wdi-guide-core .g-prog{fill:none;stroke:#F92F64;stroke-width:2;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .12s linear;}
#wdi-ux-page .wdi-guide-num{position:relative;z-index:1;font-family:var(--font-figtree),system-ui,sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#0B0C0E;font-feature-settings:"tnum" 1;}

/* thread sits inside the core, pointing at the nearest page edge */
#wdi-ux-page .wdi-guide-thread{position:absolute;top:50%;width:1px;height:88px;transform:translateY(-50%);
  background:linear-gradient(180deg,transparent,rgba(249,47,100,.5),transparent);}
#wdi-ux-page .wdi-guide:not(.is-left) .wdi-guide-thread{right:-16px;}
#wdi-ux-page .wdi-guide.is-left  .wdi-guide-thread{left:-16px;}

/* label sits inboard of the core, so it can never leave the viewport */
#wdi-ux-page .wdi-guide-label{position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--font-figtree),system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#41454C;white-space:nowrap;
  background:rgba(255,255,255,.86);border:1px solid rgba(11,12,14,.07);border-radius:999px;
  padding:6px 12px;box-shadow:0 4px 14px rgba(11,12,14,.08);backdrop-filter:blur(8px);
  max-width:190px;overflow:hidden;text-overflow:ellipsis;}
#wdi-ux-page .wdi-guide:not(.is-left) .wdi-guide-label{right:calc(100% + 12px);}
#wdi-ux-page .wdi-guide.is-left  .wdi-guide-label{left:calc(100% + 12px);}

/* settle when it hops to the next section */
#wdi-ux-page .wdi-guide.is-hop .wdi-guide-core{animation:wdiGuideHop .6s cubic-bezier(.2,.8,.2,1);}
@keyframes wdiGuideHop{
  0%{transform:scale(.82);box-shadow:0 0 0 0 rgba(249,47,100,.34),0 6px 22px rgba(11,12,14,.14);}
  60%{transform:scale(1.06);}
  100%{transform:scale(1);box-shadow:0 0 0 12px rgba(249,47,100,0),0 6px 22px rgba(11,12,14,.14);}
}

/* dark sections: invert so it stays legible */
#wdi-ux-page .wdi-guide.on-dark .wdi-guide-core{background:rgba(18,19,24,.86);box-shadow:0 6px 22px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.12);}
#wdi-ux-page .wdi-guide.on-dark .wdi-guide-num{color:#fff;}
#wdi-ux-page .wdi-guide.on-dark .wdi-guide-core .g-ring{stroke:rgba(255,255,255,.16);}
#wdi-ux-page .wdi-guide.on-dark .wdi-guide-label{background:rgba(18,19,24,.8);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.82);}

@media(max-width:900px){#wdi-ux-page .wdi-guide-label{display:none;}}
@media(max-width:680px){#wdi-ux-page .wdi-guide{display:none;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .wdi-guide{display:none;}}

/* ============================================================
   WDI — Live section ambience
   Subtle, always-moving backdrops so sections feel alive without
   competing with content. CSS-only, GPU-friendly, motion-safe.
   ============================================================ */

/* every top-level section becomes an ambience host */
#wdi-ux-page > section{position:relative;isolation:isolate;}
/* lift only the content wrappers above the ambience — never decorative layers,
   which are absolutely positioned and must keep their own position/z-index */
#wdi-ux-page > section > .wrap,
#wdi-ux-page > section > .svv-wrap,
#wdi-ux-page > section > .ivv-wrap,
#wdi-ux-page > section > .hb-wrap,
#wdi-ux-page > section > .tsm-head,
#wdi-ux-page > section > .tsm-rows,
#wdi-ux-page > section > .lp-eco-head,
#wdi-ux-page > section > .lp-eco-strip{position:relative;z-index:1;}

/* --- drifting aura: two soft brand-coloured masses, slow opposing paths --- */
#wdi-ux-page > section::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:52%;height:70%;top:-12%;left:-8%;border-radius:50%;
  background:radial-gradient(circle,rgba(249,47,100,.055),transparent 66%);
  filter:blur(18px);
  animation:wdiAmbA 26s ease-in-out infinite;
}
#wdi-ux-page > section::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:46%;height:64%;bottom:-14%;right:-6%;border-radius:50%;
  background:radial-gradient(circle,rgba(122,0,255,.05),transparent 66%);
  filter:blur(18px);
  animation:wdiAmbB 32s ease-in-out infinite;
}
@keyframes wdiAmbA{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(7%,9%,0) scale(1.16);}
}
@keyframes wdiAmbB{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-8%,-7%,0) scale(1.12);}
}

/* alternate the drift direction so consecutive sections do not sync up */
#wdi-ux-page > section:nth-of-type(even)::before{animation-direction:reverse;animation-duration:30s;}
#wdi-ux-page > section:nth-of-type(even)::after{animation-direction:reverse;animation-duration:27s;}
#wdi-ux-page > section:nth-of-type(3n)::before{animation-duration:34s;}
#wdi-ux-page > section:nth-of-type(3n)::after{animation-duration:29s;}

/* --- dark sections get a slowly travelling hairline grid on top of the aura --- */
#wdi-ux-page .lp-band, #wdi-ux-page .piw-sec, #wdi-ux-page .teb-sec, #wdi-ux-page .tsm-sec, #wdi-ux-page .lp-final, #wdi-ux-page .outcomes--a{overflow:hidden;}
#wdi-ux-page .lp-band::before, #wdi-ux-page .piw-sec::before, #wdi-ux-page .teb-sec::before, #wdi-ux-page .tsm-sec::before, #wdi-ux-page .lp-final::before, #wdi-ux-page .outcomes--a::before{
  background:radial-gradient(circle,rgba(249,47,100,.14),transparent 66%);
}
#wdi-ux-page .lp-band::after, #wdi-ux-page .piw-sec::after, #wdi-ux-page .teb-sec::after, #wdi-ux-page .tsm-sec::after, #wdi-ux-page .lp-final::after, #wdi-ux-page .outcomes--a::after{
  background:radial-gradient(circle,rgba(122,0,255,.12),transparent 66%);
}
#wdi-ux-page .wdi-amb-grid{
  position:absolute;inset:-40px 0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 84%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 84%);
  animation:wdiAmbGrid 24s linear infinite;
}
@keyframes wdiAmbGrid{from{background-position:0 0,0 0;}to{background-position:0 62px,62px 0;}}

/* light sections get a faint travelling dot field instead */
#wdi-ux-page .wdi-amb-dots{
  position:absolute;inset:-30px 0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(15,17,20,.05) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(74% 62% at 50% 42%,#000,transparent 82%);
  -webkit-mask-image:radial-gradient(74% 62% at 50% 42%,#000,transparent 82%);
  animation:wdiAmbDots 30s linear infinite;
}
@keyframes wdiAmbDots{from{background-position:0 0;}to{background-position:26px 26px;}}

/* the hero owns its own motion — keep ambience out of it */
#wdi-ux-page > section:first-of-type::before,
#wdi-ux-page > section:first-of-type::after{display:none;}

@media(prefers-reduced-motion:reduce){
  #wdi-ux-page > section::before,#wdi-ux-page > section::after,#wdi-ux-page .wdi-amb-grid,#wdi-ux-page .wdi-amb-dots{animation:none;}
}

/* ============================================================
   PERF: ambient layers are paused by default and only run for
   the section currently in view (class added by the observer).
   ============================================================ */
#wdi-ux-page > section::before,
#wdi-ux-page > section::after,
#wdi-ux-page > section .wdi-amb-grid,
#wdi-ux-page > section .wdi-amb-dots{animation-play-state:paused!important;}
#wdi-ux-page > section.is-live::before,
#wdi-ux-page > section.is-live::after,
#wdi-ux-page > section.is-live .wdi-amb-grid,
#wdi-ux-page > section.is-live .wdi-amb-dots{animation-play-state:running!important;}
/* masked background-position animations force full repaints — drop the animation,
   keep the texture static (the aura layers carry the motion) */
#wdi-ux-page > section .wdi-amb-grid,
#wdi-ux-page > section .wdi-amb-dots{animation:none!important;}

/* ---- LAYOUT: keep the ambient bloom inside its host box so there is
   nothing to clip. Previously right:-55.44px pushed 55.5px of page
   scroll; clipping at html stalled paint, so constrain instead. ---- */
#wdi-ux-page > section::before,
#wdi-ux-page > section::after{right:0!important;max-width:100%!important;}


#wdi-ux-page{--maxw:1280px;--void:#000;--ash:#9a9a9a;--silver:#bdbdbd;}
/* ---- Hero V1 · Constellation (Mobile Hero) ---- */
#wdi-ux-page .hb1{position:relative;width:100%;min-height:100svh;background:var(--void);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;font-family:var(--font);}
#wdi-ux-page .hb1-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;}
#wdi-ux-page .hb1-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 82% 44%,transparent 30%,rgba(0,0,0,.55) 78%),linear-gradient(90deg,#000 6%,rgba(0,0,0,.4) 34%,transparent 56%);}
#wdi-ux-page .hb1-crumb{position:relative;z-index:4;max-width:var(--maxw);width:100%;margin:0 auto;padding:26px clamp(22px,5vw,56px) 0;}
#wdi-ux-page .hb1-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:400;color:var(--ash);}
#wdi-ux-page .hb1-crumb li+li::before{content:"/";margin-right:8px;color:#4a4a4a;}
#wdi-ux-page .hb1-crumb a{color:var(--ash);text-decoration:none;transition:color .25s;}
#wdi-ux-page .hb1-crumb a:hover{color:#fff;}
#wdi-ux-page .hb1-crumb [aria-current]{color:#fff;}
#wdi-ux-page .hb1-body{position:relative;z-index:4;flex:1;display:flex;align-items:center;max-width:var(--maxw);width:100%;margin:0 auto;padding:clamp(30px,5vw,64px) clamp(22px,5vw,56px) clamp(34px,4vw,56px);}
#wdi-ux-page .hb1-copy{max-width:660px;}
#wdi-ux-page .hb1-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-300);margin-bottom:24px;opacity:0;transform:translateY(16px);animation:hb1Rise .9s cubic-bezier(.2,.7,.2,1) .1s forwards;}
#wdi-ux-page .hb1-eyebrow .d{width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-500),var(--violet));box-shadow:0 0 14px rgba(249,47,100,.8);}
#wdi-ux-page .hb1-h{font-size:clamp(40px,6.2vw,84px);font-weight:400;letter-spacing:-0.045em;line-height:1;color:#fff;text-wrap:balance;}
#wdi-ux-page .hb1-h .l1,#wdi-ux-page .hb1-h .l2{display:block;opacity:0;transform:translateY(26px);animation:hb1Rise 1s cubic-bezier(.2,.7,.2,1) forwards;}
#wdi-ux-page .hb1-h .l1{animation-delay:.18s;}
#wdi-ux-page .hb1-h .l2{animation-delay:.3s;}
#wdi-ux-page .hb1-h .accent{color:#FF6F92;}
#wdi-ux-page .hb1-sub{margin-top:26px;max-width:56ch;font-size:clamp(16px,1.4vw,18.5px);font-weight:300;line-height:1.6;color:var(--silver);opacity:0;transform:translateY(20px);animation:hb1Rise 1s cubic-bezier(.2,.7,.2,1) .42s forwards;}
#wdi-ux-page .hb1-aeo{margin-top:14px;max-width:58ch;font-size:14.5px;font-weight:300;line-height:1.62;color:var(--ash);opacity:0;transform:translateY(20px);animation:hb1Rise 1s cubic-bezier(.2,.7,.2,1) .5s forwards;}
#wdi-ux-page .hb1-cta{margin-top:32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;opacity:0;transform:translateY(20px);animation:hb1Rise 1s cubic-bezier(.2,.7,.2,1) .58s forwards;}
#wdi-ux-page .hb1-btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.03em;color:#fff;background:var(--rose-500);border-radius:999px;padding:15px 26px;text-decoration:none;transition:transform .3s,background .3s,box-shadow .3s;}
#wdi-ux-page .hb1-btn svg{width:16px;height:16px;transition:transform .3s;}
#wdi-ux-page .hb1-btn:hover{transform:translateY(-2px);background:var(--rose-600);box-shadow:0 18px 40px rgba(249,47,100,.42);}
#wdi-ux-page .hb1-btn:hover svg{transform:translateX(3px);}
#wdi-ux-page .hb1-ghost{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ash);text-decoration:none;transition:color .25s,gap .25s;}
#wdi-ux-page .hb1-ghost svg{width:15px;height:15px;}
#wdi-ux-page .hb1-ghost:hover{color:#fff;gap:12px;}
#wdi-ux-page .hb1-labels{margin-top:clamp(28px,3.4vw,42px);display:flex;flex-wrap:wrap;gap:9px;opacity:0;animation:hb1Fade 1s ease .72s forwards;}
#wdi-ux-page .hb1-labels span{font-size:12.5px;font-weight:500;color:#d6d6d6;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 15px;transition:border-color .3s,color .3s,transform .3s;}
#wdi-ux-page .hb1-labels span:hover{border-color:var(--rose-400);color:#fff;transform:translateY(-2px);}
#wdi-ux-page .hb1-meta{position:relative;z-index:4;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 clamp(22px,5vw,56px) clamp(30px,4vw,48px);font-size:13px;font-weight:300;line-height:1.6;color:#6f6f6f;max-width:min(var(--maxw),94ch);opacity:0;animation:hb1Fade 1s ease .84s forwards;}
@keyframes hb1Rise{to{opacity:1;transform:none;}}
@keyframes hb1Fade{to{opacity:1;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .hb1-eyebrow,#wdi-ux-page .hb1-h .l1,#wdi-ux-page .hb1-h .l2,#wdi-ux-page .hb1-sub,#wdi-ux-page .hb1-aeo,#wdi-ux-page .hb1-cta,#wdi-ux-page .hb1-labels,#wdi-ux-page .hb1-meta{animation:none;opacity:1;transform:none;}}
@media(max-width:820px){#wdi-ux-page .hb1{min-height:auto;}#wdi-ux-page .hb1-veil{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.62));}}
/* ---- Hero 05 (AI Solutions) — ported, WDI rose/violet/blue only ---- */
#wdi-ux-page .hb{position:relative;width:100%;overflow:hidden;isolation:isolate;font-family:var(--font);}
#wdi-ux-page .hb-wrap{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,56px);}
#wdi-ux-page .hb-body{padding:clamp(52px,7vw,96px) 0 clamp(60px,8vw,110px);}
#wdi-ux-page .hb-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:-0.01em;padding:9px 16px;border-radius:999px;}
#wdi-ux-page .hbtn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:600;letter-spacing:-0.01em;border-radius:999px;padding:14px 24px;cursor:pointer;border:1.5px solid transparent;white-space:nowrap;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,border-color .3s,box-shadow .3s;}
#wdi-ux-page .hbtn svg{width:16px;height:16px;transition:transform .3s;}
#wdi-ux-page .hbtn:hover svg{transform:translateX(3px);}
#wdi-ux-page .hbtn-lg{font-size:16px;padding:16px 30px;}
#wdi-ux-page .hbtn-ink{background:var(--rose-500);color:#fff;border-color:var(--rose-500);box-shadow:0 14px 30px rgba(249,47,100,.28);}
#wdi-ux-page .hbtn-ink:hover{background:var(--rose-600);border-color:var(--rose-600);transform:translateY(-2px);box-shadow:0 20px 42px rgba(249,47,100,.4);}
#wdi-ux-page .hbtn-line{background:#fff;color:var(--ink);border-color:var(--line-2);}
#wdi-ux-page .hbtn-line:hover{border-color:var(--ink);transform:translateY(-2px);}
#wdi-ux-page .hb-rise{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .hb.in .hb-rise.d1{transition-delay:.08s;}
#wdi-ux-page .hb.in .hb-rise.d2{transition-delay:.16s;}
#wdi-ux-page .hb.in .hb-rise.d3{transition-delay:.24s;}
#wdi-ux-page .hb.in .hb-rise.d4{transition-delay:.32s;}
#wdi-ux-page .hb.in .hb-rise.d5{transition-delay:.40s;}
#wdi-ux-page .hb5{background:#fff;color:var(--ink);text-align:center;}
#wdi-ux-page .hb5-blobs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
#wdi-ux-page .hb5-blobs span{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(72px);opacity:.42;}
#wdi-ux-page .hb5-blobs .a{top:-10%;left:5%;background:radial-gradient(circle,#F92F64,transparent 68%);animation:hb5f1 20s ease-in-out infinite;}
#wdi-ux-page .hb5-blobs .b{top:-6%;right:7%;background:radial-gradient(circle,#7A00FF,transparent 68%);animation:hb5f2 24s ease-in-out infinite;}
#wdi-ux-page .hb5-blobs .c{bottom:-18%;left:38%;background:radial-gradient(circle,#2D5ADC,transparent 68%);animation:hb5f3 28s ease-in-out infinite;}
@keyframes hb5f1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6%,8%) scale(1.12);}}
@keyframes hb5f2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-7%,6%) scale(1.08);}}
@keyframes hb5f3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5%,-8%) scale(1.14);}}
#wdi-ux-page .hb5-pill{background:#F3F4F6;color:var(--ink-2);border:1px solid var(--line);}
#wdi-ux-page .hb5-h{margin:24px auto 0;font-size:clamp(38px,5.4vw,74px);font-weight:600;letter-spacing:-0.04em;line-height:1.02;max-width:19ch;}
#wdi-ux-page .hb5-h .g{background:linear-gradient(100deg,#F92F64,#A24BFF 45%,#2D5ADC 75%,#F92F64);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:hb5flow 9s ease infinite;}
@keyframes hb5flow{0%,100%{background-position:0 50%;}50%{background-position:100% 50%;}}
#wdi-ux-page .hb5-sub{margin:24px auto 0;font-size:clamp(16px,1.4vw,19px);font-weight:300;line-height:1.58;color:var(--ink-2);max-width:64ch;}
#wdi-ux-page .hb5-aeo{margin:14px auto 0;font-size:15px;font-weight:300;line-height:1.6;color:var(--muted);max-width:70ch;}
#wdi-ux-page .hb5-cta{margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .hb5-orbit{margin-top:clamp(36px,4.4vw,56px);display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
#wdi-ux-page .hb5-orbit span{font-size:13px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;box-shadow:0 6px 18px rgba(11,12,14,.05);transition:transform .3s,border-color .3s,color .3s;}
#wdi-ux-page .hb5-orbit span:hover{transform:translateY(-2px);border-color:var(--rose-300);color:var(--rose-600);}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .hb5-blobs span,#wdi-ux-page .hb5-h .g{animation:none;}}
/* no external imagery: local gradient stands in for stock/avatar images */
#wdi-ux-page .sv1-visual{background:linear-gradient(150deg,rgba(249,47,100,.14),rgba(122,0,255,.12) 55%,rgba(45,90,220,.1));border-radius:20px;min-height:320px;}

#wdi-ux-page .tsm-card .av,#wdi-ux-page .tsm-quote .av,#wdi-ux-page .ts-av{background:linear-gradient(140deg,var(--rose-400),var(--violet));}
#wdi-ux-page .tsm-sec img,


#wdi-ux-page .t01-mini{position:relative;background:#08090B;color:#fff;text-align:center;overflow:hidden;isolation:isolate;}
#wdi-ux-page .t01-mini .lp-h{color:#fff;}
#wdi-ux-page .t01-mini-aura{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 120% at 50% 0%,rgba(249,47,100,.2),transparent 60%);}
#wdi-ux-page .t01-mini .wrap{position:relative;z-index:1;}
#wdi-ux-page .t01-mini p{max-width:58ch;margin:14px auto 0;font-size:16px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.66);}
#wdi-ux-page .t01-mini .lp-inline-cta{margin-top:28px;}
/* Product Intelligence — give the stage room so it does not compress */
#wdi-ux-page .piw-sec{padding:clamp(72px,8vw,120px) 0;}
#wdi-ux-page .piw-head{max-width:900px;margin:0 auto clamp(38px,4.6vw,60px);text-align:center;}
#wdi-ux-page .piw-head .lp-eyebrow{justify-content:center;}
#wdi-ux-page .piw-head .lp-h{text-align:center;}
#wdi-ux-page .piw-head .lp-aeo{margin-left:auto;margin-right:auto;text-align:center;}
#wdi-ux-page .piw-stage{max-width:1120px;min-height:clamp(520px,52vw,660px);margin-left:auto;margin-right:auto;}
#wdi-ux-page .piw-note{max-width:62ch;margin:clamp(26px,3vw,38px) auto 0;text-align:center;}
#wdi-ux-page .lp-faq .fqa-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start;}
@media(max-width:900px){#wdi-ux-page .lp-faq .fqa-grid{grid-template-columns:1fr;gap:24px;}}


/* trusted-logo strip (PPC03 treatment): larger, optically balanced, full colour */
#wdi-ux-page #proof .lp-eco-track{gap:clamp(52px,5vw,78px);}
#wdi-ux-page #proof .lp-eco-logo{background:none;}
#wdi-ux-page #proof .lp-eco-logo img{height:64px;filter:grayscale(1);mix-blend-mode:multiply;background:transparent;transition:transform .35s,filter .35s;}
#wdi-ux-page #proof .lp-eco-logo:hover img{filter:grayscale(0);transform:translateY(-2px);}
#wdi-ux-page #proof .lp-eco-logo img[src*="angelone"]{width:196px;height:113px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="vedanta"]{height:82px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="blue-star"]{height:132px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="rpg"]{height:58px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="dorf-ketal"]{width:207px;height:115px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="gsf"]{width:175px;height:42px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="good-times"]{height:62px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="tanami-wordmark"]{height:44px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="zinghr"]{height:68px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="traders-circuit"]{height:50px;}
#wdi-ux-page #proof .lp-eco-logo img[src*="regroup"]{height:64px;}
@media(max-width:680px){#wdi-ux-page #proof .lp-eco-logo img{height:48px;}}

/* ============================================================
   05 · WHAT WE DO — service grid, parallaxes over the client wall
   ============================================================ */
#wdi-ux-page .mws{position:relative;z-index:2;background:#0B0C0E;color:#fff;
  padding:clamp(64px,7.4vw,112px) 0 clamp(56px,6.4vw,96px);}
#wdi-ux-page .mws-eye{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page .mws-eye i{width:5px;height:5px;border-radius:50%;background:var(--rose-400);
  box-shadow:0 0 0 3px rgba(249,47,100,.2);}
#wdi-ux-page .mws-h{margin:18px 0 0;font-size:clamp(34px,5vw,76px);font-weight:400;letter-spacing:-0.05em;
  line-height:1.04;color:#fff;}
#wdi-ux-page .mws-lead{margin:22px 0 0;max-width:74ch;font-size:clamp(15px,1.25vw,17px);font-weight:300;
  line-height:1.68;color:rgba(255,255,255,.6);}
#wdi-ux-page .mws-rule{margin:clamp(30px,3.4vw,46px) 0 0;height:1px;background:rgba(255,255,255,.14);}
#wdi-ux-page .mws-grid{margin-top:clamp(34px,4vw,56px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,3.6vw,64px) clamp(30px,3.6vw,58px);}
#wdi-ux-page .mws-card{position:relative;display:flex;flex-direction:column;}
#wdi-ux-page .mws-n{position:absolute;top:2px;right:0;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.2em;color:rgba(255,255,255,.3);}
#wdi-ux-page .mws-ic{width:52px;height:52px;display:grid;place-items:center;background:#fff;color:#0B0C0E;
  clip-path:polygon(0 0,100% 0,100% 68%,68% 100%,0 100%);transition:background .3s ease,color .3s ease;}
#wdi-ux-page .mws-ic svg{width:24px;height:24px;}
#wdi-ux-page .mws-card:hover .mws-ic{background:var(--rose-500);color:#fff;}
#wdi-ux-page .mws-card h3{margin-top:clamp(20px,2.2vw,28px);font-size:clamp(20px,1.9vw,27px);font-weight:400;
  letter-spacing:-0.035em;line-height:1.14;color:#fff;max-width:18ch;}
#wdi-ux-page .mws-card p{margin-top:14px;font-size:14.5px;font-weight:300;line-height:1.66;
  color:rgba(255,255,255,.58);}
#wdi-ux-page .mws-go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:clamp(18px,2vw,26px);
  align-self:flex-start;font-size:14px;font-weight:500;letter-spacing:-0.01em;color:#fff;
  text-decoration:none;transition:color .3s ease,gap .3s ease;}
#wdi-ux-page .mws-go span{border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:3px;transition:border-color .3s ease;}
#wdi-ux-page .mws-go svg{width:15px;height:15px;}
#wdi-ux-page .mws-go:hover{color:var(--rose-300);gap:14px;}
#wdi-ux-page .mws-go:hover span{border-color:var(--rose-400);}
#wdi-ux-page .mws-go:focus-visible{outline:2px solid var(--rose-400);outline-offset:4px;}
@media(max-width:1020px){#wdi-ux-page .mws-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){#wdi-ux-page .mws-grid{grid-template-columns:1fr;}#wdi-ux-page .mws-card h3{max-width:none;}}
/* service titles: every card holds two lines */
#wdi-ux-page .mws-card h3{max-width:14ch;min-height:2.28em;}
@media(max-width:680px){#wdi-ux-page .mws-card h3{max-width:14ch;}}
@media(max-width:940px){
  #wdi-ux-page .mws-pin{position:relative;top:auto;}
}
@media(max-width:940px){
  
  #wdi-ux-page .mws-pin{min-height:0;display:block;}
}
/* services: fully visible first, then a hold, then the cover.
   Track = pin height + hold, so the grid is never cut off. */


/* the hold: empty space after the pinned content, before the next section covers it */

@media(max-width:940px){
  #wdi-ux-page .mws-pin{position:relative;top:auto;}
  #wdi-ux-page .mws::after{display:none;}
}
/* clean reveal: services scrolls fully, holds, then the grid covers it */



@media(max-width:940px){
  
  #wdi-ux-page .mws-pin{position:relative;top:auto;}
}
#wdi-ux-page .mws-h{font-size:clamp(34px,5vw,76px);}
#wdi-ux-page .mws-lead{margin-top:22px;font-size:clamp(15px,1.25vw,17px);max-width:74ch;}
#wdi-ux-page .mws-rule{margin-top:clamp(30px,3.4vw,46px);}
#wdi-ux-page .mws-grid{margin-top:clamp(34px,4vw,56px);gap:clamp(30px,3.6vw,64px) clamp(30px,3.6vw,58px);}
#wdi-ux-page .mws-ic{width:52px;height:52px;}
#wdi-ux-page .mws-ic svg{width:24px;height:24px;}
#wdi-ux-page .mws-card h3{margin-top:clamp(20px,2.2vw,28px);font-size:clamp(20px,1.9vw,27px);
  max-width:14ch;min-height:2.28em;}
#wdi-ux-page .mws-card p{margin-top:14px;font-size:14.5px;line-height:1.66;}
#wdi-ux-page .mws-go{padding-top:clamp(18px,2vw,26px);font-size:14px;}
/* services + decisions: normal document flow, one consistent scale */
#wdi-ux-page .mws{position:relative;z-index:1;background:#0B0C0E;padding:0;}
/* service + decision card headings */
#wdi-ux-page .mws-card h3{font-weight:500!important;font-size:clamp(20px,2.2vw,34px)!important;}
/* card headings unified at the 34px ceiling across all three grids */
#wdi-ux-page .mws-card h3,#wdi-ux-page .mdg-cell h3,#wdi-ux-page .mrs-cell h3,#wdi-ux-page .mte-cell h3{
  font-size:clamp(20px,2.2vw,34px)!important;}
/* grid items: subtle grey wash on hover, plus the rose circle cursor */
#wdi-ux-page .mws-card,#wdi-ux-page .mdg-cell,#wdi-ux-page .mrs-cell,#wdi-ux-page .mte-cell{transition:background .38s ease,transform .5s var(--ease);}
#wdi-ux-page .mws-card,#wdi-ux-page .mte-cell{border-radius:16px;padding:clamp(20px,2.2vw,28px);margin:calc(-1 * clamp(20px,2.2vw,28px));}
#wdi-ux-page .mws-card:hover{background:rgba(255,255,255,.05);}
@media(hover:none){
  #wdi-ux-page .mws-card,#wdi-ux-page .mdg-cell,#wdi-ux-page .mrs-cell,#wdi-ux-page .mte-cell{cursor:auto!important;}
}
#wdi-ux-page .mws-h{font-size:clamp(34px,5vw,76px);}
#wdi-ux-page .mws-lead{margin-top:22px;font-size:clamp(15px,1.25vw,17px);max-width:74ch;}
#wdi-ux-page .mws-rule{margin-top:clamp(30px,3.4vw,46px);}
#wdi-ux-page .mws-grid{margin-top:clamp(34px,4vw,56px);gap:clamp(30px,3.6vw,64px) clamp(30px,3.6vw,58px);}
#wdi-ux-page .mws-ic{width:52px;height:52px;}
#wdi-ux-page .mws-ic svg{width:24px;height:24px;}
#wdi-ux-page .mws-card h3{margin-top:clamp(20px,2.2vw,28px);font-size:clamp(20px,1.9vw,27px);
  max-width:14ch;min-height:2.28em;}
#wdi-ux-page .mws-card p{margin-top:14px;font-size:14.5px;line-height:1.66;}
#wdi-ux-page .mws-go{padding-top:clamp(18px,2vw,26px);font-size:14px;}
/* services + decisions: normal document flow, one consistent scale */
#wdi-ux-page .mws{position:relative;z-index:1;background:#0B0C0E;padding:0;}
@media(max-width:940px){
  #wdi-ux-page .mws-drop{overflow:visible;border-radius:0;box-shadow:none;}
  #wdi-ux-page .mws-drop .mws-track{transform:none;}
  #wdi-ux-page .mws-drop::before,#wdi-ux-page .mws-drop::after{display:none;}
  #wdi-ux-page .mlw{transform:none;}
}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .mws-drop .mws-track{transform:none;}#wdi-ux-page .mlw{transform:none;}#wdi-ux-page .mws-drop{border-radius:0;box-shadow:none;}}
@media(max-width:940px),(prefers-reduced-motion:reduce){
  #wdi-ux-page .mws-drop .mws-eye,#wdi-ux-page .mws-drop .mws-h,#wdi-ux-page .mws-drop .mws-lead,#wdi-ux-page .mws-drop .mws-rule,#wdi-ux-page .mws-drop .mws-card,#wdi-ux-page .mws-drop .mws-h .w{opacity:1;transform:none;}
}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
#wdi-ux-page .wdi-eye,
#wdi-ux-page .mcl-eye,
#wdi-ux-page .mws-eye,
#wdi-ux-page .mdg-eye,
#wdi-ux-page .msol-eyebrow,
#wdi-ux-page .mind-eyebrow,
#wdi-ux-page .pr-eyebrow,
#wdi-ux-page .mte-eyebrow,
#wdi-ux-page .mai-eyebrow,
#wdi-ux-page .ts-eyebrow,
#wdi-ux-page .aisay-eye,
#wdi-ux-page .wby-eye,
#wdi-ux-page .mrs-eye,
#wdi-ux-page .fq-eyebrow,
#wdi-ux-page .spm-eye,
#wdi-ux-page .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  line-height:1!important;margin:0 0 18px!important;
  color:#F92F64!important;}
#wdi-ux-page .wdi-eye::before,
#wdi-ux-page .mcl-eye::before,
#wdi-ux-page .mws-eye::before,
#wdi-ux-page .mdg-eye::before,
#wdi-ux-page .msol-eyebrow::before,
#wdi-ux-page .mind-eyebrow::before,
#wdi-ux-page .pr-eyebrow::before,
#wdi-ux-page .mte-eyebrow::before,
#wdi-ux-page .mai-eyebrow::before,
#wdi-ux-page .ts-eyebrow::before,
#wdi-ux-page .aisay-eye::before,
#wdi-ux-page .wby-eye::before,
#wdi-ux-page .mrs-eye::before,
#wdi-ux-page .fq-eyebrow::before,
#wdi-ux-page .spm-eye::before,
#wdi-ux-page .pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
/* the old inline dash markers are replaced by the ::before rule */
#wdi-ux-page .mcl-eye>i,#wdi-ux-page .mws-eye>i,#wdi-ux-page .msol-eyebrow>i,#wdi-ux-page .mind-eyebrow>i,#wdi-ux-page .mte-eyebrow>i,#wdi-ux-page .mai-eyebrow>i,#wdi-ux-page .aisay-eye>i{display:none!important;}
/* on dark grounds the rose reads brighter */
#wdi-ux-page .mcl-eye,#wdi-ux-page .mws-eye,#wdi-ux-page .mdg-eye,#wdi-ux-page .mai-eyebrow,#wdi-ux-page .aisay-eye,#wdi-ux-page .ts-eyebrow,#wdi-ux-page .pp-projects-head .eyebrow{color:#FF7BA3!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-ux-page section .wdi-eye,
#wdi-ux-page section .mcl-eye,
#wdi-ux-page section .mws-eye,
#wdi-ux-page section .mdg-eye,
#wdi-ux-page section .msol-eyebrow,
#wdi-ux-page section .mind-eyebrow,
#wdi-ux-page section .pr-eyebrow,
#wdi-ux-page section .mte-eyebrow,
#wdi-ux-page section .mai-eyebrow,
#wdi-ux-page section .ts-eyebrow,
#wdi-ux-page section .aisay-eye,
#wdi-ux-page section .wby-eye,
#wdi-ux-page section .mrs-eye,
#wdi-ux-page section .fq-eyebrow,
#wdi-ux-page section .spm-eye,
#wdi-ux-page section .avv-eyebrow,
#wdi-ux-page section .lfv-eyebrow,
#wdi-ux-page #work .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1!important;}
#wdi-ux-page section .wdi-eye::before,
#wdi-ux-page section .mcl-eye::before,
#wdi-ux-page section .mws-eye::before,
#wdi-ux-page section .mdg-eye::before,
#wdi-ux-page section .msol-eyebrow::before,
#wdi-ux-page section .mind-eyebrow::before,
#wdi-ux-page section .pr-eyebrow::before,
#wdi-ux-page section .mte-eyebrow::before,
#wdi-ux-page section .mai-eyebrow::before,
#wdi-ux-page section .ts-eyebrow::before,
#wdi-ux-page section .aisay-eye::before,
#wdi-ux-page section .wby-eye::before,
#wdi-ux-page section .mrs-eye::before,
#wdi-ux-page section .fq-eyebrow::before,
#wdi-ux-page section .spm-eye::before,
#wdi-ux-page section .avv-eyebrow::before,
#wdi-ux-page section .lfv-eyebrow::before,
#wdi-ux-page #work .pp-projects-head .eyebrow::before{
  content:""!important;width:22px!important;height:1.5px!important;flex:none!important;
  background:currentColor!important;border-radius:0!important;box-shadow:none!important;
  opacity:.85!important;animation:none!important;margin:0!important;}
/* flat (non-pinned) usage — generous editorial breathing room */
#wdi-ux-page section.mws.mws-flat{padding:clamp(112px,13vw,184px) 0 clamp(120px,14vw,200px)!important;height:auto!important;min-height:0!important;}
#wdi-ux-page .mws-flat .mws-head{margin-bottom:clamp(36px,4vw,56px);}
#wdi-ux-page .mws-flat .mws-rule{margin-bottom:clamp(40px,4.5vw,64px);}
@media(max-width:760px){#wdi-ux-page section.mws.mws-flat{padding:88px 0 96px!important;}}

@keyframes mrRise{to{opacity:1;transform:none;}}
@keyframes mrpRun{to{transform:translateX(-50%);}}
@keyframes mclA{to{transform:translateX(-50%);}}
@keyframes mclB{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes mstLiquid{from{background-position:0% 50%;}to{background-position:280% 50%;}}
@keyframes mlwL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes mlwR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes mlwL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes mlwR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes ctSpin{from{transform:rotate(0deg) scale(var(--ct-scale,1));}
                  to{transform:rotate(360deg) scale(var(--ct-scale,1));}}
/* ============================================================
   06 · SUPPORT YOUR MOBILE PRODUCT — tinted bento with UI mocks
   ============================================================ */
#wdi-ux-page .spm{background:#fff;padding:clamp(64px,7.4vw,112px) 0;}
#wdi-ux-page .spm-head{text-align:center;max-width:900px;margin:0 auto clamp(38px,4.4vw,64px);}
#wdi-ux-page .spm-h{margin:0;font-size:clamp(34px,4.6vw,68px);font-weight:400;letter-spacing:-0.05em;
  line-height:1.04;color:var(--ink);}
#wdi-ux-page .spm-lead{margin:20px auto 0;max-width:74ch;font-size:clamp(14.5px,1.15vw,16.5px);font-weight:300;
  line-height:1.7;color:var(--muted);}
#wdi-ux-page .spm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,24px);}
#wdi-ux-page .spm-card{position:relative;overflow:hidden;border-radius:24px;padding:clamp(26px,2.8vw,40px);
  min-height:clamp(340px,34vw,470px);display:flex;flex-direction:column;
  transition:transform .5s var(--ease);}
#wdi-ux-page .spm-card:hover{transform:translateY(-4px);}
#wdi-ux-page .spm-card.t1{background:linear-gradient(160deg,#F2F2F4,#E9EAEE);}
#wdi-ux-page .spm-card.t2{background:linear-gradient(160deg,#F4EEFF,#EDE4FF);}
#wdi-ux-page .spm-card.t3{background:linear-gradient(160deg,#FFEFF4,#FFE3EC);}
#wdi-ux-page .spm-card.t4{background:linear-gradient(160deg,#EAF6F1,#DFF1E9);}
#wdi-ux-page .spm-card.t5{background:linear-gradient(160deg,#EFF3FA,#E4EBF7);}
#wdi-ux-page .spm-card.t6{background:linear-gradient(160deg,#F5F3EE,#EDE9E1);}
#wdi-ux-page .spm-copy h3{margin:0;font-size:clamp(21px,2.1vw,31px);font-weight:500;letter-spacing:-0.035em;
  line-height:1.14;color:var(--ink);}
#wdi-ux-page .spm-copy p{margin:12px 0 0;max-width:44ch;font-size:14.5px;font-weight:300;line-height:1.62;
  color:rgba(11,12,14,.6);}
/* mock composition */
#wdi-ux-page .spm-art{position:relative;flex:1;margin-top:clamp(22px,2.4vw,34px);min-height:180px;}
@media(max-width:900px){
  #wdi-ux-page .spm-grid{grid-template-columns:1fr;}
  #wdi-ux-page .spm-card{min-height:0;}
  #wdi-ux-page .spm-art{min-height:230px;}
}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .spm-card{transition:none;}}


/* cards keep the floating detail card only */
#wdi-ux-page .spm-art{min-height:130px;}
/* ============================================================
   §06 device: hyper-real iPhone shell, cropped by the card edge
   ============================================================ */
#wdi-ux-page .spm-card{overflow:hidden;}
#wdi-ux-page .spm-art{min-height:clamp(210px,22vw,300px);}
#wdi-ux-page .dvc{position:absolute;right:6%;top:6%;width:clamp(184px,19vw,252px);z-index:1;
  transition:transform .8s var(--ease);}
#wdi-ux-page .spm-card:hover .dvc{transform:translateY(-6px);}
@media(max-width:900px){
  #wdi-ux-page .dvc{position:relative;right:auto;top:auto;margin:0 auto;width:min(230px,64%);}
  #wdi-ux-page .spm-float,#wdi-ux-page .spm-f-b{position:relative;left:auto;bottom:auto;margin-top:16px;transform:none;}
}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .dvc{transition:none;}}
/* ---- varied composition, per the reference ---- */
#wdi-ux-page .spm-art{position:relative;}
#wdi-ux-page .dv-r .dvc{right:2%;left:auto;top:2%;}
#wdi-ux-page .dv-l .dvc{left:6%;right:auto;top:2%;}
#wdi-ux-page .dv-low .dvc{top:-12%;}
@media(max-width:900px){
  #wdi-ux-page .dv-r .dvc,#wdi-ux-page .dv-l .dvc,#wdi-ux-page .dv-low .dvc{position:relative;left:auto;right:auto;top:auto;margin:0 auto;}
}
/* ============================================================
   §06 pseudo-bento: uneven spans, varied art, per-card link
   ============================================================ */
#wdi-ux-page .spm-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;}
#wdi-ux-page .spm-card{grid-column:span 3;min-height:0;padding:clamp(24px,2.4vw,34px);}
#wdi-ux-page .spm-card:nth-child(1){grid-column:span 4;}
#wdi-ux-page .spm-card:nth-child(2){grid-column:span 2;}
#wdi-ux-page .spm-card:nth-child(3){grid-column:span 2;}
#wdi-ux-page .spm-card:nth-child(4){grid-column:span 4;}
#wdi-ux-page .spm-card:nth-child(5){grid-column:span 3;}
#wdi-ux-page .spm-card:nth-child(6){grid-column:span 3;}
#wdi-ux-page .spm-copy p{max-width:38ch;}
/* art wells sized to their content, so no dead white space */
#wdi-ux-page .spm-art{margin-top:clamp(16px,1.8vw,26px);min-height:clamp(200px,20vw,272px);}
#wdi-ux-page .spm-art.a2,#wdi-ux-page .spm-art.a3,#wdi-ux-page .spm-art.a6{min-height:clamp(190px,19vw,240px);}
/* device variants */
#wdi-ux-page .dvc{position:absolute;transition:transform .8s var(--ease);}
#wdi-ux-page .dv-full{right:-2%;top:0;width:clamp(158px,15.5vw,206px);}
#wdi-ux-page .spm-card:hover .dvc{transform:translateY(-6px);}
#wdi-ux-page .spm-card:hover .win{transform:translateY(-6px);}
/* floating cards, hyper-real */
#wdi-ux-page .fc{position:absolute;z-index:3;background:#fff;border-radius:14px;
  box-shadow:0 22px 46px -18px rgba(11,12,14,.34),0 0 0 1px rgba(11,12,14,.05);}
#wdi-ux-page .fc-list{left:0;bottom:8%;width:clamp(200px,21vw,268px);padding:6px 14px;}
#wdi-ux-page .fc-r{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F4F4F6;}
#wdi-ux-page .fc-r:last-child{border-bottom:0;}
#wdi-ux-page .fc-r i{width:16px;height:16px;border-radius:5px;flex:none;background:#EFEFF3;}
#wdi-ux-page .fc-r .ic-a{background:linear-gradient(140deg,#FFD9E4,#FFB0C7);}
#wdi-ux-page .fc-r .ic-b{background:linear-gradient(140deg,#DCE7FF,#B9CDFF);}
#wdi-ux-page .fc-r .ic-c{background:linear-gradient(140deg,#DFF3E7,#BEE6D0);}
#wdi-ux-page .fc-r span{flex:1;display:flex;flex-direction:column;}
#wdi-ux-page .fc-r b{font-size:10.5px;font-weight:600;color:var(--ink);}
#wdi-ux-page .fc-r em{font-style:normal;font-size:9.5px;color:var(--muted);}
#wdi-ux-page .fc-r u{text-decoration:none;font-size:12px;color:var(--line-2);}
/* stacked card treatment (no device) */
#wdi-ux-page .fc-stack{position:relative;left:auto;bottom:auto;width:100%;background:none;box-shadow:none;}
#wdi-ux-page .fc-ghost{position:absolute;left:6%;top:-4%;right:10%;height:88%;border-radius:14px;
  background:rgba(11,12,14,.05);transform:rotate(-4deg);}
#wdi-ux-page .fc-card{position:relative;display:block;background:#fff;border-radius:14px;padding:14px;
  box-shadow:0 22px 46px -18px rgba(11,12,14,.3),0 0 0 1px rgba(11,12,14,.05);
  transform:rotate(-2deg);transition:transform .7s var(--ease);}
#wdi-ux-page .spm-card:hover .fc-card{transform:rotate(-2deg) translateY(-5px);}
#wdi-ux-page .fc-head{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid #F2F2F5;}
#wdi-ux-page .fc-head .av{width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--rose-400),var(--violet));}
#wdi-ux-page .fc-head span{display:flex;flex-direction:column;}
#wdi-ux-page .fc-head b{font-size:11.5px;font-weight:600;color:var(--ink);}
#wdi-ux-page .fc-head em{font-style:normal;font-size:9.5px;color:var(--muted);}
#wdi-ux-page .fc-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px;}
#wdi-ux-page .fc-shots i{display:block;aspect-ratio:3/4;border-radius:7px;}
#wdi-ux-page .fc-note{display:block;margin-top:10px;font-size:9.5px;color:var(--muted);}
@media(max-width:1000px){
  #wdi-ux-page .spm-grid{grid-template-columns:repeat(2,1fr);}
  #wdi-ux-page .spm-card:nth-child(n){grid-column:span 1;}
}
@media(max-width:760px){
  #wdi-ux-page .spm-grid{grid-template-columns:1fr;}
  #wdi-ux-page .dvc,#wdi-ux-page .win,#wdi-ux-page .fc-list,#wdi-ux-page .fc-mini{position:relative;left:auto;right:auto;top:auto;bottom:auto;
    margin:0 auto;width:min(230px,72%);transform:none;}
  #wdi-ux-page .fc-mini{margin-top:14px;width:auto;}
}
/* ---- squad card with real faces ---- */
#wdi-ux-page .av-img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;}
/* photo tiles now carry real imagery */
#wdi-ux-page .ap-tiles i,#wdi-ux-page .fc-shots i{background-size:cover;background-position:center;}
/* [1][2] portal stack: three overlapping windows */
#wdi-ux-page .spm-art.a4{position:relative;}
#wdi-ux-page .spm-card:hover .spm-copy{transform:none;}
/* ---- a4: three genuine website screens, tightly stacked ---- */
#wdi-ux-page .spm-art.a4{position:relative;overflow:hidden;}
#wdi-ux-page .spm-card:hover .site.s3{transform:scale(.92) translateY(-6px);opacity:.55;}
#wdi-ux-page .spm-card:hover .site.s2{transform:scale(.97) translateY(-3px);opacity:.85;}
/* cloud pipeline card */
#wdi-ux-page .cld{position:absolute;right:0;bottom:8%;width:74%;padding:14px 16px;border-radius:12px;
  background:#fff;border:1px solid rgba(11,12,14,.1);box-shadow:0 18px 40px rgba(11,12,14,.16);}
#wdi-ux-page .cld-k{display:block;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(11,12,14,.4);}
#wdi-ux-page .cld-steps{display:flex;gap:6px;margin-top:10px;}
#wdi-ux-page .cld-steps span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;
  background:#F2F7F3;font-size:9px;font-weight:600;color:#2F7D4F;}
#wdi-ux-page .cld-steps i{font-style:normal;font-size:9px;}
#wdi-ux-page .cld-live{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:9px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .cld-live i{width:5px;height:5px;border-radius:50%;background:var(--rose-500);}
/* dedicated squad card */
#wdi-ux-page .spm-art.a6{position:relative;overflow:hidden;}
#wdi-ux-page .sq{position:absolute;right:0;bottom:6%;width:80%;padding:14px 16px;border-radius:12px;background:#fff;
  border:1px solid rgba(11,12,14,.1);box-shadow:0 18px 40px rgba(11,12,14,.16);}
#wdi-ux-page .sq-k{display:block;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(11,12,14,.4);margin-bottom:10px;}
#wdi-ux-page .sq-row{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid rgba(11,12,14,.07);}
#wdi-ux-page .sq-row:first-of-type{border-top:0;}
#wdi-ux-page .sq-row img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none;}
#wdi-ux-page .sq-row b{flex:1;font-size:9.5px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);}
#wdi-ux-page .sq-row i{font-style:normal;font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rose-600);}
/* ---- support grid: pseudo-bento, varied spans ---- */
#wdi-ux-page .spm-grid{display:grid!important;grid-template-columns:repeat(6,1fr)!important;
  gap:clamp(14px,1.6vw,22px)!important;align-items:stretch;}
#wdi-ux-page .spm-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;padding:clamp(26px,2.6vw,36px);min-height:clamp(330px,30vw,420px);}
#wdi-ux-page .spm-card.t1{grid-column:span 4;}
#wdi-ux-page .spm-card.t2{grid-column:span 2;}
#wdi-ux-page .spm-card.t3{grid-column:span 2;}
#wdi-ux-page .spm-card.t4{grid-column:span 4;}
#wdi-ux-page .spm-card.t5{grid-column:span 3;}
#wdi-ux-page .spm-card.t6{grid-column:span 3;}
#wdi-ux-page .spm-copy{position:relative;z-index:2;}
#wdi-ux-page .spm-art{position:relative;flex:1;min-height:clamp(150px,14vw,200px);margin-top:clamp(18px,2vw,26px);}
@media(max-width:1020px){
  #wdi-ux-page .spm-grid{grid-template-columns:repeat(2,1fr)!important;}
  #wdi-ux-page .spm-card.t1,#wdi-ux-page .spm-card.t2,#wdi-ux-page .spm-card.t3,#wdi-ux-page .spm-card.t4,#wdi-ux-page .spm-card.t5,#wdi-ux-page .spm-card.t6{grid-column:span 1;}
}
@media(max-width:680px){
  #wdi-ux-page .spm-grid{grid-template-columns:1fr!important;}
}
@keyframes mlwL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes mlwR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes cbR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes mqL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes mqR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes aisayFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(0,-14px,0) rotate(-.6deg);}
}
/* ---- user-supplied screenshots inside the support cards ---- */
#wdi-ux-page .spm-grid{position:relative;}
#wdi-ux-page .spm-card{position:relative;}
#wdi-ux-page .spm-shot{position:absolute;display:block;object-fit:cover;pointer-events:none;}
#wdi-ux-page .s-t1{width:385px;max-width:70%;height:auto;aspect-ratio:385/802;left:456px;top:-117px;border-radius:59px;}
#wdi-ux-page .s-t3{width:351px;height:398px;max-width:100%;aspect-ratio:3210/3687;left:83px;top:-34px;}
#wdi-ux-page .s-t4{width:2860px;max-width:100%;height:auto;aspect-ratio:2860/6722;top:115px;}
#wdi-ux-page .s-t5{width:2787px;max-width:100%;height:auto;aspect-ratio:2787/2090;left:-195px;top:32px;}
#wdi-ux-page .s-t5b{width:196px;height:396px;max-width:100%;aspect-ratio:800/1610;left:461px;top:-180px;border-radius:40px;}
#wdi-ux-page .spm-art.a4{width:838px;height:269px;}
#wdi-ux-page .spm-card.t5 .cld{left:319px;top:86px;position:absolute;width:306px;height:93px;}
@media(max-width:900px){#wdi-ux-page .spm-shot{display:none;}#wdi-ux-page .spm-art.a4{width:auto;height:auto;}}
/* dedicated-teams squad panel: repositioned per direct edit */
#wdi-ux-page .spm-card.t6 .sq{left:13px;top:0;position:absolute;width:481px;height:158px;}
@media(max-width:900px){#wdi-ux-page .spm-card.t6 .sq{position:static;height:auto;}}
/* t4 screenshot: card-level, replacing the in-heading placement */
#wdi-ux-page .s-t4{width:1742px;max-width:100%;height:auto;aspect-ratio:1742/1218;top:142px;left:-8px;}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
#wdi-ux-page .wdi-eye,
#wdi-ux-page .mcl-eye,
#wdi-ux-page .mws-eye,
#wdi-ux-page .mdg-eye,
#wdi-ux-page .msol-eyebrow,
#wdi-ux-page .mind-eyebrow,
#wdi-ux-page .pr-eyebrow,
#wdi-ux-page .mte-eyebrow,
#wdi-ux-page .mai-eyebrow,
#wdi-ux-page .ts-eyebrow,
#wdi-ux-page .aisay-eye,
#wdi-ux-page .wby-eye,
#wdi-ux-page .mrs-eye,
#wdi-ux-page .fq-eyebrow,
#wdi-ux-page .spm-eye,
#wdi-ux-page .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  line-height:1!important;margin:0 0 18px!important;
  color:#F92F64!important;}
#wdi-ux-page .wdi-eye::before,
#wdi-ux-page .mcl-eye::before,
#wdi-ux-page .mws-eye::before,
#wdi-ux-page .mdg-eye::before,
#wdi-ux-page .msol-eyebrow::before,
#wdi-ux-page .mind-eyebrow::before,
#wdi-ux-page .pr-eyebrow::before,
#wdi-ux-page .mte-eyebrow::before,
#wdi-ux-page .mai-eyebrow::before,
#wdi-ux-page .ts-eyebrow::before,
#wdi-ux-page .aisay-eye::before,
#wdi-ux-page .wby-eye::before,
#wdi-ux-page .mrs-eye::before,
#wdi-ux-page .fq-eyebrow::before,
#wdi-ux-page .spm-eye::before,
#wdi-ux-page .pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
#wdi-ux-page .avv-sec.av-a .wdi-eye{margin-bottom:0!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-ux-page section .wdi-eye,
#wdi-ux-page section .mcl-eye,
#wdi-ux-page section .mws-eye,
#wdi-ux-page section .mdg-eye,
#wdi-ux-page section .msol-eyebrow,
#wdi-ux-page section .mind-eyebrow,
#wdi-ux-page section .pr-eyebrow,
#wdi-ux-page section .mte-eyebrow,
#wdi-ux-page section .mai-eyebrow,
#wdi-ux-page section .ts-eyebrow,
#wdi-ux-page section .aisay-eye,
#wdi-ux-page section .wby-eye,
#wdi-ux-page section .mrs-eye,
#wdi-ux-page section .fq-eyebrow,
#wdi-ux-page section .spm-eye,
#wdi-ux-page section .avv-eyebrow,
#wdi-ux-page section .lfv-eyebrow,
#wdi-ux-page #work .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1!important;}
#wdi-ux-page section .wdi-eye::before,
#wdi-ux-page section .mcl-eye::before,
#wdi-ux-page section .mws-eye::before,
#wdi-ux-page section .mdg-eye::before,
#wdi-ux-page section .msol-eyebrow::before,
#wdi-ux-page section .mind-eyebrow::before,
#wdi-ux-page section .pr-eyebrow::before,
#wdi-ux-page section .mte-eyebrow::before,
#wdi-ux-page section .mai-eyebrow::before,
#wdi-ux-page section .ts-eyebrow::before,
#wdi-ux-page section .aisay-eye::before,
#wdi-ux-page section .wby-eye::before,
#wdi-ux-page section .mrs-eye::before,
#wdi-ux-page section .fq-eyebrow::before,
#wdi-ux-page section .spm-eye::before,
#wdi-ux-page section .avv-eyebrow::before,
#wdi-ux-page section .lfv-eyebrow::before,
#wdi-ux-page #work .pp-projects-head .eyebrow::before{
  content:""!important;width:22px!important;height:1.5px!important;flex:none!important;
  background:currentColor!important;border-radius:0!important;box-shadow:none!important;
  opacity:.85!important;animation:none!important;margin:0!important;}
/* ---- support your mobile product: staged fade-in per bento card ---- */
#wdi-ux-page .spm-grid .spm-card{opacity:0;transform:translate3d(0,26px,0) scale(.985);
  transition:opacity .95s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;}
#wdi-ux-page .spm-grid .spm-card.in{opacity:1;transform:none;}
#wdi-ux-page .spm-grid .spm-card:nth-child(1).in{transition-delay:0ms;}
#wdi-ux-page .spm-grid .spm-card:nth-child(2).in{transition-delay:90ms;}
#wdi-ux-page .spm-grid .spm-card:nth-child(3).in{transition-delay:180ms;}
#wdi-ux-page .spm-grid .spm-card:nth-child(4).in{transition-delay:120ms;}
#wdi-ux-page .spm-grid .spm-card:nth-child(5).in{transition-delay:210ms;}
#wdi-ux-page .spm-grid .spm-card:nth-child(6).in{transition-delay:300ms;}
#wdi-ux-page .spm-head .spm-eye,#wdi-ux-page .spm-head .spm-h,#wdi-ux-page .spm-head .spm-lead{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);}
#wdi-ux-page .spm-head.in .spm-eye{opacity:1;transform:none;}
#wdi-ux-page .spm-head.in .spm-h{opacity:1;transform:none;transition-delay:90ms;}
#wdi-ux-page .spm-head.in .spm-lead{opacity:1;transform:none;transition-delay:180ms;}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .spm-grid .spm-card,#wdi-ux-page .spm-head .spm-eye,#wdi-ux-page .spm-head .spm-h,#wdi-ux-page .spm-head .spm-lead{opacity:1!important;transform:none!important;transition:none!important;}
}
@keyframes dvwFill{from{width:0}to{width:100%}}
@keyframes hwDrift{to{transform:translate3d(-50%,0,0);}}
@keyframes mrhSheen{0%{transform:translateX(-46%);}55%,100%{transform:translateX(46%);}}
@keyframes mai2SwayA{from{transform:rotate(-10deg) translate3d(0,0,0);}to{transform:rotate(10deg) translate3d(4%,3%,0);}}
@keyframes mai2SwayB{from{transform:rotate(8deg) translate3d(0,0,0);}to{transform:rotate(-12deg) translate3d(-4%,-3%,0);}}
/* the flip itself */
@keyframes mai2Flip{0%{transform:rotate(0) scaleX(1);}50%{transform:rotate(-9deg) scaleX(.2);}100%{transform:rotate(0) scaleX(-1);}}
@keyframes mai2TitleIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes mai2RoamA{
  0%{transform:translate3d(0,0,0) rotate(-8deg);}
  35%{transform:translate3d(34vw,14vh,0) rotate(4deg);}
  70%{transform:translate3d(58vw,4vh,0) rotate(12deg);}
  100%{transform:translate3d(12vw,26vh,0) rotate(-4deg);}}
@keyframes mai2RoamB{
  0%{transform:translate3d(0,0,0) rotate(6deg);}
  40%{transform:translate3d(-38vw,-12vh,0) rotate(-6deg);}
  75%{transform:translate3d(-62vw,-2vh,0) rotate(-14deg);}
  100%{transform:translate3d(-16vw,-24vh,0) rotate(4deg);}}
/* flip rides on top of the roam via the inner pseudo trick: keep flip on filter/scale only */
@keyframes mai2Flip{0%{scale:1 1;}50%{scale:.15 1;}100%{scale:-1 1;}}
@keyframes mai2RoamA{
  0%{transform:translate3d(0,0,0) rotate(-8deg);}
  35%{transform:translate3d(34vw,6vh,0) rotate(4deg);}
  70%{transform:translate3d(58vw,-2vh,0) rotate(12deg);}
  100%{transform:translate3d(12vw,10vh,0) rotate(-4deg);}}
@keyframes mai2RoamB{
  0%{transform:translate3d(0,0,0) rotate(6deg);}
  40%{transform:translate3d(-38vw,-6vh,0) rotate(-6deg);}
  75%{transform:translate3d(-62vw,0,0) rotate(-14deg);}
  100%{transform:translate3d(-16vw,-10vh,0) rotate(4deg);}}
/* AI section: shapes patrol the outer gutters only — never across the text column */
@keyframes mai2RoamA{
  0%{transform:translate3d(0,-6vh,0) rotate(-8deg);}
  30%{transform:translate3d(4vw,12vh,0) rotate(2deg);}
  65%{transform:translate3d(1vw,30vh,0) rotate(10deg);}
  100%{transform:translate3d(5vw,6vh,0) rotate(-3deg);}}
@keyframes mai2RoamB{
  0%{transform:translate3d(0,0,0) rotate(6deg);}
  35%{transform:translate3d(-4vw,-16vh,0) rotate(-5deg);}
  70%{transform:translate3d(-1vw,-30vh,0) rotate(-12deg);}
  100%{transform:translate3d(-5vw,-8vh,0) rotate(3deg);}}
/* ============================================================
   06 · HOW WDI CAN HELP — parallax decision grid
   ============================================================ */
#wdi-ux-page .mdg{position:relative;z-index:3;background:#fff;
  padding:clamp(64px,7.4vw,112px) 0 0;}
#wdi-ux-page .mdg-head{max-width:var(--measure,1440px);margin:0 auto;padding:0 var(--gutter,clamp(24px,4vw,64px));}
#wdi-ux-page .mdg-eye{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;}
#wdi-ux-page .mdg-h{margin:clamp(22px,2.6vw,34px) 0 0;font-size:clamp(34px,5vw,76px);font-weight:400;
  letter-spacing:-0.05em;line-height:1.02;color:var(--ink);max-width:18ch;}
#wdi-ux-page .mdg-h .amp{color:var(--muted);}
#wdi-ux-page .mdg-lead{margin:22px 0 0;max-width:66ch;font-size:clamp(15px,1.25vw,17px);font-weight:300;
  line-height:1.68;color:var(--muted);}
#wdi-ux-page .mdg-cta{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(26px,3vw,38px);height:48px;
  padding:0 26px;border-radius:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  transition:background .3s ease,transform .35s var(--ease),box-shadow .35s ease;}
#wdi-ux-page .mdg-cta svg{width:15px;height:15px;transition:transform .35s var(--ease);}
#wdi-ux-page .mdg-cta:hover{background:var(--rose-500);transform:translateY(-2px);box-shadow:0 16px 34px rgba(249,47,100,.3);}
#wdi-ux-page .mdg-cta:hover svg{transform:translateX(3px);}
#wdi-ux-page .mdg-cta:focus-visible{outline:2px solid var(--rose-500);outline-offset:4px;}
/* 3 × 2 gradient blocks, edge to edge */
#wdi-ux-page .mdg-grid{margin-top:clamp(48px,5.6vw,88px);display:grid;grid-template-columns:repeat(3,1fr);}
#wdi-ux-page .mdg-cell{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(300px,32vw,420px);padding:clamp(28px,3vw,44px);isolation:isolate;
  transition:transform .5s var(--ease);}
#wdi-ux-page .mdg-cell::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .5s ease;}
#wdi-ux-page .mdg-cell:nth-child(1)::before{background:linear-gradient(155deg,#0B0C0E,#17121C 58%,#1B0F17);}
#wdi-ux-page .mdg-cell:nth-child(2)::before{background:linear-gradient(155deg,#F5F3F5,#EFEBF2);}
#wdi-ux-page .mdg-cell:nth-child(3)::before{background:linear-gradient(155deg,#FBFBFC,#F4F4F6);}
#wdi-ux-page .mdg-cell:nth-child(4)::before{background:linear-gradient(155deg,#FBFBFC,#F4F4F6);}
#wdi-ux-page .mdg-cell:nth-child(5)::before{background:linear-gradient(155deg,#F5F3F5,#EFEBF2);}
#wdi-ux-page .mdg-cell:nth-child(6)::before{background:linear-gradient(155deg,#0B0C0E,#17121C 58%,#1B0F17);}
/* rose bloom rises on hover */
#wdi-ux-page .mdg-cell::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .55s ease;
  background:radial-gradient(70% 70% at 20% 100%,rgba(249,47,100,.18),transparent 62%),
             radial-gradient(60% 60% at 90% 0%,rgba(122,0,255,.14),transparent 66%);}
#wdi-ux-page .mdg-cell:hover::after{opacity:1;}
#wdi-ux-page .mdg-n{position:absolute;top:clamp(24px,2.6vw,36px);right:clamp(26px,2.8vw,40px);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--faint);}
#wdi-ux-page .mdg-cell h3{font-size:clamp(20px,1.9vw,27px);font-weight:400;letter-spacing:-0.035em;line-height:1.12;
  color:var(--ink);max-width:16ch;}
#wdi-ux-page .mdg-cell p{margin-top:12px;font-size:14.5px;font-weight:300;line-height:1.62;color:var(--muted);
  max-width:38ch;}
/* dark cells invert */
#wdi-ux-page .mdg-cell:nth-child(1) h3,#wdi-ux-page .mdg-cell:nth-child(6) h3{color:#fff;}
#wdi-ux-page .mdg-cell:nth-child(1) p,#wdi-ux-page .mdg-cell:nth-child(6) p{color:rgba(255,255,255,.6);}
#wdi-ux-page .mdg-cell:nth-child(1) .mdg-n,#wdi-ux-page .mdg-cell:nth-child(6) .mdg-n{color:rgba(255,255,255,.34);}
@media(max-width:1020px){#wdi-ux-page .mdg-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){#wdi-ux-page .mdg-grid{grid-template-columns:1fr;}#wdi-ux-page .mdg-cell{min-height:240px;}}
/* light cells sit on tinted gradients — raise body copy and numerals to pass AA */
#wdi-ux-page .mdg-cell:not(:nth-child(1)):not(:nth-child(6)) p{color:var(--ink-2);}
#wdi-ux-page .mdg-n{font-size:12px;color:var(--muted);}
#wdi-ux-page .mdg-cell:nth-child(1) .mdg-n,#wdi-ux-page .mdg-cell:nth-child(6) .mdg-n{color:rgba(255,255,255,.72);}
/* ---- WDI eyebrow + button treatment ---- */
#wdi-ux-page .mdg-eye{display:inline-flex!important;align-items:center;gap:9px;border:0!important;padding:0!important;
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-600)!important;}
#wdi-ux-page .mdg-eye i{width:5px;height:5px;border-radius:50%;background:var(--rose-500);
  box-shadow:0 0 0 3px rgba(249,47,100,.16);}
#wdi-ux-page .mdg-h .amp{background:linear-gradient(102deg,var(--rose-600),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .mdg-cta{border-radius:999px!important;font-size:14.5px!important;letter-spacing:-0.01em!important;
  text-transform:none!important;}
/* ---- parallax: grid slides up over the pinned services section ---- */

#wdi-ux-page .mdg{position:relative;z-index:3;border-radius:28px 28px 0 0;
  box-shadow:0 -28px 60px rgba(11,12,14,.28);}
#wdi-ux-page .mdg-cell:hover .mdg-ic{background:var(--rose-500);color:#fff;}
#wdi-ux-page .mdg-cell:nth-child(1) .mdg-ic,#wdi-ux-page .mdg-cell:nth-child(6) .mdg-ic{background:rgba(255,255,255,.1);color:#fff;}
#wdi-ux-page .mdg-cell{justify-content:space-between;}
#wdi-ux-page .mdg-body{margin-top:clamp(22px,2.4vw,32px);}
#wdi-ux-page .mdg-cell:hover .mdg-go,#wdi-ux-page .mdg-cell:focus-within .mdg-go{opacity:1;transform:none;}
#wdi-ux-page .mdg-cell:nth-child(1) .mdg-go,#wdi-ux-page .mdg-cell:nth-child(6) .mdg-go{color:var(--rose-300);}
/* services: scroll through all six cards, then hold while the grid rises over it.
   The extra track height below the pin is the "hold" before the cover begins. */



/* the decision grid slides up over the held frame */
#wdi-ux-page .mdg{position:relative;z-index:3;}
/* decisions header: title left, paragraph right */
#wdi-ux-page .mdg-head-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:end;}
#wdi-ux-page .mdg-head-split .mdg-eye{grid-column:1;}
#wdi-ux-page .mdg-head-split .mdg-h{grid-column:1;margin-top:16px;}
#wdi-ux-page .mdg-head-split .mdg-lead{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0;max-width:52ch;}
@media(max-width:940px){
  #wdi-ux-page .mdg-head-split{grid-template-columns:1fr;gap:18px;}
  #wdi-ux-page .mdg-head-split .mdg-lead{grid-column:1;grid-row:auto;}
}
#wdi-ux-page .mdg{position:relative;z-index:2;border-radius:0;box-shadow:none;}
/* decisions headline accent: no gradient */
#wdi-ux-page .mdg-h .amp{background:none!important;-webkit-background-clip:border-box!important;
  background-clip:border-box!important;color:var(--muted)!important;}
#wdi-ux-page .mdg-cell h3{font-weight:500!important;font-size:clamp(20px,2.2vw,34px)!important;}
/* card headings unified at the 34px ceiling across all three grids */
#wdi-ux-page .mws-card h3,#wdi-ux-page .mdg-cell h3,#wdi-ux-page .mrs-cell h3,#wdi-ux-page .mte-cell h3{
  font-size:clamp(20px,2.2vw,34px)!important;}
/* card body copy: weight 400, consistent size and colour across the grids */
#wdi-ux-page .mdg-cell p,#wdi-ux-page .mrs-cell p,#wdi-ux-page .mte-cell p{font-weight:400!important;font-size:14.5px!important;}
/* grid items: subtle grey wash on hover, plus the rose circle cursor */
#wdi-ux-page .mws-card,#wdi-ux-page .mdg-cell,#wdi-ux-page .mrs-cell,#wdi-ux-page .mte-cell{transition:background .38s ease,transform .5s var(--ease);}
#wdi-ux-page .mdg-cell:hover,#wdi-ux-page .mrs-cell:hover{background:rgba(11,12,14,.04);}
#wdi-ux-page .mdg-cell:nth-child(1):hover,#wdi-ux-page .mdg-cell:nth-child(6):hover,#wdi-ux-page .mrs-cell:nth-child(1):hover,#wdi-ux-page .mrs-cell:nth-child(5):hover{background:rgba(255,255,255,.06);}
@media(hover:none){
  #wdi-ux-page .mws-card,#wdi-ux-page .mdg-cell,#wdi-ux-page .mrs-cell,#wdi-ux-page .mte-cell{cursor:auto!important;}
}
#wdi-ux-page .mdg{position:relative;z-index:3;background:#fff;padding:clamp(64px,7.4vw,112px) 0 0;
  border-radius:26px 26px 0 0;box-shadow:0 -30px 70px rgba(11,12,14,.26);}
#wdi-ux-page .mdg ~ section,#wdi-ux-page .mdg ~ footer{position:relative;z-index:3;}
#wdi-ux-page .mdg-head{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);}
#wdi-ux-page .mdg-head-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:end;}
#wdi-ux-page .mdg-eye{grid-column:1;justify-self:start;display:inline-block;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);
  border-radius:999px;padding:7px 14px;}
#wdi-ux-page .mdg-h{grid-column:1;margin:16px 0 0;font-size:clamp(34px,5vw,76px);font-weight:400;
  letter-spacing:-0.05em;line-height:1.02;color:var(--ink);max-width:18ch;}
#wdi-ux-page .mdg-h .amp{color:var(--muted);}
#wdi-ux-page .mdg-lead{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0;max-width:56ch;
  font-size:clamp(15px,1.22vw,17px);font-weight:400;line-height:1.68;color:var(--muted);}
#wdi-ux-page .mdg-cta{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(26px,3vw,38px);height:48px;padding:0 26px;border-radius:10px;background:var(--ink);
  color:#fff;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:background .3s ease,transform .35s var(--ease),box-shadow .35s ease;}
#wdi-ux-page .mdg-cta svg{width:15px;height:15px;transition:transform .35s var(--ease);}
#wdi-ux-page .mdg-cta:hover{background:var(--rose-500);transform:translateY(-2px);box-shadow:0 16px 34px rgba(249,47,100,.3);}
#wdi-ux-page .mdg-cta:hover svg{transform:translateX(3px);}
#wdi-ux-page .mdg-cta:focus-visible{outline:2px solid var(--rose-500);outline-offset:4px;}
/* 3 × 2 gradient blocks, edge to edge */
#wdi-ux-page .mdg-grid{margin-top:clamp(48px,5.6vw,88px);display:grid;grid-template-columns:repeat(3,1fr);}
#wdi-ux-page .mdg-cell{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(300px,32vw,420px);padding:clamp(28px,3vw,44px);isolation:isolate;}
#wdi-ux-page .mdg-cell::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .5s ease;}
#wdi-ux-page .mdg-cell:nth-child(1)::before,#wdi-ux-page .mdg-cell:nth-child(6)::before{
  background:linear-gradient(155deg,#0B0C0E,#17121C 58%,#1B0F17);}
#wdi-ux-page .mdg-cell:nth-child(2)::before,#wdi-ux-page .mdg-cell:nth-child(5)::before{
  background:linear-gradient(155deg,#F5F3F5,#EFEBF2);}
#wdi-ux-page .mdg-cell:nth-child(3)::before,#wdi-ux-page .mdg-cell:nth-child(4)::before{
  background:linear-gradient(155deg,#FBFBFC,#F4F4F6);}
#wdi-ux-page .mdg-cell::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .55s ease;
  background:radial-gradient(70% 70% at 20% 100%,rgba(249,47,100,.18),transparent 62%),
             radial-gradient(60% 60% at 90% 0%,rgba(122,0,255,.14),transparent 66%);}
#wdi-ux-page .mdg-cell:hover::after{opacity:1;}
#wdi-ux-page .mdg-n{position:absolute;top:clamp(24px,2.6vw,36px);right:clamp(26px,2.8vw,40px);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--faint);}
#wdi-ux-page .mdg-cell h3{font-size:clamp(20px,2.2vw,34px);font-weight:500;letter-spacing:-0.035em;
  line-height:1.14;color:var(--ink);}
#wdi-ux-page .mdg-cell p{margin-top:12px;font-size:14.5px;font-weight:400;line-height:1.62;color:var(--muted);
  max-width:38ch;}
#wdi-ux-page .mdg-cell:nth-child(1) h3,#wdi-ux-page .mdg-cell:nth-child(6) h3{color:#fff;}
#wdi-ux-page .mdg-cell:nth-child(1) p,#wdi-ux-page .mdg-cell:nth-child(6) p{color:rgba(255,255,255,.6);}
#wdi-ux-page .mdg-cell:nth-child(1) .mdg-n,#wdi-ux-page .mdg-cell:nth-child(6) .mdg-n{color:rgba(255,255,255,.34);}
/* hover pill */
#wdi-ux-page .mdg-pill{position:absolute;left:clamp(28px,3vw,44px);bottom:clamp(28px,3vw,44px);
  display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 18px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:-0.01em;
  text-decoration:none;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .38s ease,transform .42s var(--ease),background .3s ease,gap .3s ease;}
#wdi-ux-page .mdg-pill svg{width:13px;height:13px;}
#wdi-ux-page .mdg-cell:hover .mdg-pill,#wdi-ux-page .mdg-cell:focus-within .mdg-pill{opacity:1;transform:none;pointer-events:auto;}
#wdi-ux-page .mdg-pill:hover{background:var(--rose-500);gap:13px;}
#wdi-ux-page .mdg-cell:nth-child(1) .mdg-pill,#wdi-ux-page .mdg-cell:nth-child(6) .mdg-pill{background:#fff;color:var(--ink);}
#wdi-ux-page .mdg-cell:nth-child(1) .mdg-pill:hover,#wdi-ux-page .mdg-cell:nth-child(6) .mdg-pill:hover{background:var(--rose-500);color:#fff;}
#wdi-ux-page .mdg-cell:hover .mdg-body{transform:translateY(-46px);}
#wdi-ux-page .mdg-body{transition:transform .42s var(--ease);}
@media(hover:none){
  #wdi-ux-page .mdg-pill{opacity:1;transform:none;pointer-events:auto;position:static;margin-top:18px;}
  #wdi-ux-page .mdg-cell:hover .mdg-body{transform:none;}
}
@media(max-width:1020px){#wdi-ux-page .mdg-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  #wdi-ux-page .msu{position:relative;top:auto;}
  #wdi-ux-page .mdg{border-radius:0;box-shadow:none;}
  #wdi-ux-page .mdg-head-split{grid-template-columns:1fr;gap:18px;}
  #wdi-ux-page .mdg-lead{grid-column:1;grid-row:auto;}
  #wdi-ux-page .mdg-grid{grid-template-columns:1fr;}
  #wdi-ux-page .mdg-cell{min-height:240px;}
}
#wdi-ux-page .mdg{position:relative!important;z-index:auto!important;border-radius:0!important;box-shadow:none!important;}
/* decisions header: title left, paragraph right */
#wdi-ux-page .mdg-head-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:end;}
#wdi-ux-page .mdg-head-split .mdg-eye{grid-column:1;}
#wdi-ux-page .mdg-head-split .mdg-h{grid-column:1;margin-top:16px;}
#wdi-ux-page .mdg-head-split .mdg-lead{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0;max-width:52ch;}
@media(max-width:940px){
  #wdi-ux-page .mdg-head-split{grid-template-columns:1fr;gap:18px;}
  #wdi-ux-page .mdg-head-split .mdg-lead{grid-column:1;grid-row:auto;}
}
#wdi-ux-page .mdg{position:relative;z-index:2;border-radius:0;box-shadow:none;}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
#wdi-ux-page .wdi-eye,
#wdi-ux-page .mcl-eye,
#wdi-ux-page .mws-eye,
#wdi-ux-page .mdg-eye,
#wdi-ux-page .msol-eyebrow,
#wdi-ux-page .mind-eyebrow,
#wdi-ux-page .pr-eyebrow,
#wdi-ux-page .mte-eyebrow,
#wdi-ux-page .mai-eyebrow,
#wdi-ux-page .ts-eyebrow,
#wdi-ux-page .aisay-eye,
#wdi-ux-page .wby-eye,
#wdi-ux-page .mrs-eye,
#wdi-ux-page .fq-eyebrow,
#wdi-ux-page .spm-eye,
#wdi-ux-page .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  line-height:1!important;margin:0 0 18px!important;
  color:#F92F64!important;}
#wdi-ux-page .wdi-eye::before,
#wdi-ux-page .mcl-eye::before,
#wdi-ux-page .mws-eye::before,
#wdi-ux-page .mdg-eye::before,
#wdi-ux-page .msol-eyebrow::before,
#wdi-ux-page .mind-eyebrow::before,
#wdi-ux-page .pr-eyebrow::before,
#wdi-ux-page .mte-eyebrow::before,
#wdi-ux-page .mai-eyebrow::before,
#wdi-ux-page .ts-eyebrow::before,
#wdi-ux-page .aisay-eye::before,
#wdi-ux-page .wby-eye::before,
#wdi-ux-page .mrs-eye::before,
#wdi-ux-page .fq-eyebrow::before,
#wdi-ux-page .spm-eye::before,
#wdi-ux-page .pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
/* on dark grounds the rose reads brighter */
#wdi-ux-page .mcl-eye,#wdi-ux-page .mws-eye,#wdi-ux-page .mdg-eye,#wdi-ux-page .mai-eyebrow,#wdi-ux-page .aisay-eye,#wdi-ux-page .ts-eyebrow,#wdi-ux-page .pp-projects-head .eyebrow{color:#FF7BA3!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-ux-page section .wdi-eye,
#wdi-ux-page section .mcl-eye,
#wdi-ux-page section .mws-eye,
#wdi-ux-page section .mdg-eye,
#wdi-ux-page section .msol-eyebrow,
#wdi-ux-page section .mind-eyebrow,
#wdi-ux-page section .pr-eyebrow,
#wdi-ux-page section .mte-eyebrow,
#wdi-ux-page section .mai-eyebrow,
#wdi-ux-page section .ts-eyebrow,
#wdi-ux-page section .aisay-eye,
#wdi-ux-page section .wby-eye,
#wdi-ux-page section .mrs-eye,
#wdi-ux-page section .fq-eyebrow,
#wdi-ux-page section .spm-eye,
#wdi-ux-page section .avv-eyebrow,
#wdi-ux-page section .lfv-eyebrow,
#wdi-ux-page #work .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1!important;}
#wdi-ux-page section .wdi-eye::before,
#wdi-ux-page section .mcl-eye::before,
#wdi-ux-page section .mws-eye::before,
#wdi-ux-page section .mdg-eye::before,
#wdi-ux-page section .msol-eyebrow::before,
#wdi-ux-page section .mind-eyebrow::before,
#wdi-ux-page section .pr-eyebrow::before,
#wdi-ux-page section .mte-eyebrow::before,
#wdi-ux-page section .mai-eyebrow::before,
#wdi-ux-page section .ts-eyebrow::before,
#wdi-ux-page section .aisay-eye::before,
#wdi-ux-page section .wby-eye::before,
#wdi-ux-page section .mrs-eye::before,
#wdi-ux-page section .fq-eyebrow::before,
#wdi-ux-page section .spm-eye::before,
#wdi-ux-page section .avv-eyebrow::before,
#wdi-ux-page section .lfv-eyebrow::before,
#wdi-ux-page #work .pp-projects-head .eyebrow::before{
  content:""!important;width:22px!important;height:1.5px!important;flex:none!important;
  background:currentColor!important;border-radius:0!important;box-shadow:none!important;
  opacity:.85!important;animation:none!important;margin:0!important;}
/* ---- decisions grid: two rows of three sweeping in from the right ---- */
#wdi-ux-page .mdg-grid .mdg-cell{opacity:0;transform:translate3d(64px,0,0);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.15s cubic-bezier(.19,.66,.31,1);
  will-change:opacity,transform;}
#wdi-ux-page .mdg-grid .mdg-cell.in{opacity:1;transform:none;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(1).in{transition-delay:0ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(2).in{transition-delay:110ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(3).in{transition-delay:220ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(4).in{transition-delay:60ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(5).in{transition-delay:170ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(6).in{transition-delay:280ms;}
@media(prefers-reduced-motion:reduce){
  #wdi-ux-page .mdg-grid .mdg-cell{opacity:1!important;transform:none!important;transition:none!important;}
}
/* leaving upward: a crisper, quicker exit than the entrance */
#wdi-ux-page .mdg-grid .mdg-cell{transition:opacity .52s cubic-bezier(.4,0,.7,.2),transform .6s cubic-bezier(.4,0,.7,.2);}
#wdi-ux-page .mdg-grid .mdg-cell.in{transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.15s cubic-bezier(.19,.66,.31,1);}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(1):not(.in){transition-delay:140ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(2):not(.in){transition-delay:70ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(3):not(.in){transition-delay:0ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(4):not(.in){transition-delay:140ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(5):not(.in){transition-delay:70ms;}
#wdi-ux-page .mdg-grid .mdg-cell:nth-child(6):not(.in){transition-delay:0ms;}
/* ============================================================
   10 · MOBILE PRODUCT SOLUTIONS — sticky rail + scrolling panels
   ============================================================ */
#wdi-ux-page .msol{background:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(56px,6.4vw,96px);}
#wdi-ux-page .msol-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,96px);align-items:start;}
/* left rail */
#wdi-ux-page .msol-rail{position:sticky;top:clamp(80px,10vh,120px);align-self:start;}
#wdi-ux-page .msol-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(18px,2.2vw,26px);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .msol-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--rose-500);
  box-shadow:0 0 0 3px rgba(249,47,100,.16);}
#wdi-ux-page .msol-h{margin:0;font-size:clamp(30px,3.6vw,56px);font-weight:400;letter-spacing:-0.05em;
  line-height:1.04;color:var(--ink);}
#wdi-ux-page .msol-lead{margin:20px 0 0;max-width:52ch;font-size:14.5px;font-weight:400;line-height:1.68;
  color:var(--muted);}
#wdi-ux-page .msol-list{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;}
#wdi-ux-page .msol-list button{display:grid;grid-template-columns:14px 30px 20px 1fr;align-items:center;gap:10px;
  width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;padding:9px 0;
  transition:color .3s ease;}
#wdi-ux-page .msol-list .dot{width:5px;height:5px;border-radius:50%;background:var(--line-2);justify-self:center;
  transition:background .3s ease,transform .3s ease;}
#wdi-ux-page .msol-list .n{font-size:15px;font-weight:400;color:var(--faint);
  font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;transition:color .3s ease;}
#wdi-ux-page .msol-list .ar{opacity:0;color:var(--ink);transition:opacity .3s ease,transform .3s ease;transform:translateX(-4px);}
#wdi-ux-page .msol-list .ar svg{width:15px;height:15px;display:block;}
#wdi-ux-page .msol-list .t{font-size:15.5px;font-weight:400;letter-spacing:-0.01em;color:var(--faint);
  transition:color .3s ease;}
#wdi-ux-page .msol-list button:hover .t{color:var(--ink-2);}
#wdi-ux-page .msol-list button.on .dot{background:var(--rose-500);transform:scale(1.3);}
#wdi-ux-page .msol-list button.on .n{color:var(--ink);}
#wdi-ux-page .msol-list button.on .ar{opacity:1;transform:none;}
#wdi-ux-page .msol-list button.on .t{color:var(--ink);}
#wdi-ux-page .msol-list button:focus-visible{outline:2px solid var(--rose-500);outline-offset:3px;}
/* right panels */
#wdi-ux-page .msol-panels{display:flex;flex-direction:column;gap:clamp(64px,9vw,150px);
  padding-top:clamp(0px,2vw,40px);}
#wdi-ux-page .msol-panel-h{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.4vw,20px);align-items:baseline;}
#wdi-ux-page .msol-idx{font-size:clamp(15px,1.2vw,18px);font-weight:400;color:var(--faint);
  font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;}
#wdi-ux-page .msol-panel h3{margin:0;font-size:clamp(26px,3vw,46px);font-weight:400;letter-spacing:-0.045em;
  line-height:1.06;color:var(--ink);}
#wdi-ux-page .msol-tags{margin-top:clamp(18px,2vw,26px);display:flex;flex-wrap:wrap;gap:8px;}
#wdi-ux-page .msol-tags span{font-size:13px;font-weight:400;letter-spacing:-0.01em;color:var(--ink-2);
  background:#F1F1F3;border-radius:999px;padding:8px 15px;transition:background .3s ease,color .3s ease;}
#wdi-ux-page .msol-panel:hover .msol-tags span{background:#EAEAEE;}
#wdi-ux-page .msol-panel p{margin:clamp(20px,2.2vw,30px) 0 0;font-size:clamp(15px,1.2vw,17px);font-weight:400;
  line-height:1.72;color:var(--ink-2);max-width:58ch;}
@media(max-width:940px){
  #wdi-ux-page .msol-in{grid-template-columns:1fr;gap:34px;}
  #wdi-ux-page .msol-rail{position:relative;top:auto;}
  #wdi-ux-page .msol-panels{gap:56px;padding-top:0;}
}
/* header spans the section, rail carries a secondary title */
#wdi-ux-page .msol-top{padding-bottom:clamp(30px,3.6vw,52px);}
#wdi-ux-page .msol-h{font-size:clamp(34px,5vw,76px)!important;max-width:22ch;}
#wdi-ux-page .msol-rule{margin-top:clamp(30px,3.4vw,46px);height:1px;background:var(--line);}
#wdi-ux-page .msol-rail-h{margin:0;font-size:clamp(24px,2.4vw,36px);font-weight:400;letter-spacing:-0.04em;
  line-height:1.06;color:var(--ink);}
#wdi-ux-page .msol-lead{margin-top:18px!important;}
#wdi-ux-page .msol-in{padding-top:clamp(30px,4vw,64px);}
/* solutions rail labels */
#wdi-ux-page .msol-rail .t{font-size:17.5px;}
/* ============================================================
   10 · MOBILE PRODUCT SOLUTIONS — sticky rail + scrolling panels
   ============================================================ */
#wdi-ux-page .msol{background:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(56px,6.4vw,96px);}
#wdi-ux-page .msol-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,96px);align-items:start;}
/* left rail */
#wdi-ux-page .msol-rail{position:sticky;top:clamp(80px,10vh,120px);align-self:start;}
#wdi-ux-page .msol-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(18px,2.2vw,26px);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .msol-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--rose-500);
  box-shadow:0 0 0 3px rgba(249,47,100,.16);}
#wdi-ux-page .msol-h{margin:0;font-size:clamp(30px,3.6vw,56px);font-weight:400;letter-spacing:-0.05em;
  line-height:1.04;color:var(--ink);}
#wdi-ux-page .msol-lead{margin:20px 0 0;max-width:52ch;font-size:14.5px;font-weight:400;line-height:1.68;
  color:var(--muted);}
#wdi-ux-page .msol-list{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;}
#wdi-ux-page .msol-list button{display:grid;grid-template-columns:14px 30px 20px 1fr;align-items:center;gap:10px;
  width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;padding:9px 0;
  transition:color .3s ease;}
#wdi-ux-page .msol-list .dot{width:5px;height:5px;border-radius:50%;background:var(--line-2);justify-self:center;
  transition:background .3s ease,transform .3s ease;}
#wdi-ux-page .msol-list .n{font-size:15px;font-weight:400;color:var(--faint);
  font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;transition:color .3s ease;}
#wdi-ux-page .msol-list .ar{opacity:0;color:var(--ink);transition:opacity .3s ease,transform .3s ease;transform:translateX(-4px);}
#wdi-ux-page .msol-list .ar svg{width:15px;height:15px;display:block;}
#wdi-ux-page .msol-list .t{font-size:15.5px;font-weight:400;letter-spacing:-0.01em;color:var(--faint);
  transition:color .3s ease;}
#wdi-ux-page .msol-list button:hover .t{color:var(--ink-2);}
#wdi-ux-page .msol-list button.on .dot{background:var(--rose-500);transform:scale(1.3);}
#wdi-ux-page .msol-list button.on .n{color:var(--ink);}
#wdi-ux-page .msol-list button.on .ar{opacity:1;transform:none;}
#wdi-ux-page .msol-list button.on .t{color:var(--ink);}
#wdi-ux-page .msol-list button:focus-visible{outline:2px solid var(--rose-500);outline-offset:3px;}
/* right panels */
#wdi-ux-page .msol-panels{display:flex;flex-direction:column;gap:clamp(64px,9vw,150px);
  padding-top:clamp(0px,2vw,40px);}
#wdi-ux-page .msol-panel-h{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.4vw,20px);align-items:baseline;}
#wdi-ux-page .msol-idx{font-size:clamp(15px,1.2vw,18px);font-weight:400;color:var(--faint);
  font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;}
#wdi-ux-page .msol-panel h3{margin:0;font-size:clamp(26px,3vw,46px);font-weight:400;letter-spacing:-0.045em;
  line-height:1.06;color:var(--ink);}
#wdi-ux-page .msol-tags{margin-top:clamp(18px,2vw,26px);display:flex;flex-wrap:wrap;gap:8px;}
#wdi-ux-page .msol-tags span{font-size:13px;font-weight:400;letter-spacing:-0.01em;color:var(--ink-2);
  background:#F1F1F3;border-radius:999px;padding:8px 15px;transition:background .3s ease,color .3s ease;}
#wdi-ux-page .msol-panel:hover .msol-tags span{background:#EAEAEE;}
#wdi-ux-page .msol-panel p{margin:clamp(20px,2.2vw,30px) 0 0;font-size:clamp(15px,1.2vw,17px);font-weight:400;
  line-height:1.72;color:var(--ink-2);max-width:58ch;}
@media(max-width:940px){
  #wdi-ux-page .msol-in{grid-template-columns:1fr;gap:34px;}
  #wdi-ux-page .msol-rail{position:relative;top:auto;}
  #wdi-ux-page .msol-panels{gap:56px;padding-top:0;}
}
/* header spans the section, rail carries a secondary title */
#wdi-ux-page .msol-top{padding-bottom:clamp(30px,3.6vw,52px);}
#wdi-ux-page .msol-h{font-size:clamp(34px,5vw,76px)!important;max-width:22ch;}
#wdi-ux-page .msol-rule{margin-top:clamp(30px,3.4vw,46px);height:1px;background:var(--line);}
#wdi-ux-page .msol-rail-h{margin:0;font-size:clamp(24px,2.4vw,36px);font-weight:400;letter-spacing:-0.04em;
  line-height:1.06;color:var(--ink);}
#wdi-ux-page .msol-lead{margin-top:18px!important;}
#wdi-ux-page .msol-in{padding-top:clamp(30px,4vw,64px);}
/* solutions rail labels */
#wdi-ux-page .msol-rail .t{font-size:17.5px;}
@media(max-width:760px){
  #wdi-ux-page .msol,#wdi-ux-page .t02-cta-band[data-screen-label="Recognition"]{position:relative!important;top:auto!important;bottom:auto!important;}
  #wdi-ux-page .mind{border-radius:0!important;box-shadow:none!important;}
}
/* CTA and solutions stay in normal flow; industries simply overlaps as it arrives */
#wdi-ux-page .msol{position:relative!important;top:auto!important;z-index:auto!important;}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
#wdi-ux-page .wdi-eye,
#wdi-ux-page .mcl-eye,
#wdi-ux-page .mws-eye,
#wdi-ux-page .mdg-eye,
#wdi-ux-page .msol-eyebrow,
#wdi-ux-page .mind-eyebrow,
#wdi-ux-page .pr-eyebrow,
#wdi-ux-page .mte-eyebrow,
#wdi-ux-page .mai-eyebrow,
#wdi-ux-page .ts-eyebrow,
#wdi-ux-page .aisay-eye,
#wdi-ux-page .wby-eye,
#wdi-ux-page .mrs-eye,
#wdi-ux-page .fq-eyebrow,
#wdi-ux-page .spm-eye,
#wdi-ux-page .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  line-height:1!important;margin:0 0 18px!important;
  color:#F92F64!important;}
#wdi-ux-page .wdi-eye::before,
#wdi-ux-page .mcl-eye::before,
#wdi-ux-page .mws-eye::before,
#wdi-ux-page .mdg-eye::before,
#wdi-ux-page .msol-eyebrow::before,
#wdi-ux-page .mind-eyebrow::before,
#wdi-ux-page .pr-eyebrow::before,
#wdi-ux-page .mte-eyebrow::before,
#wdi-ux-page .mai-eyebrow::before,
#wdi-ux-page .ts-eyebrow::before,
#wdi-ux-page .aisay-eye::before,
#wdi-ux-page .wby-eye::before,
#wdi-ux-page .mrs-eye::before,
#wdi-ux-page .fq-eyebrow::before,
#wdi-ux-page .spm-eye::before,
#wdi-ux-page .pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
/* the old inline dash markers are replaced by the ::before rule */
#wdi-ux-page .mcl-eye>i,#wdi-ux-page .mws-eye>i,#wdi-ux-page .msol-eyebrow>i,#wdi-ux-page .mind-eyebrow>i,#wdi-ux-page .mte-eyebrow>i,#wdi-ux-page .mai-eyebrow>i,#wdi-ux-page .aisay-eye>i{display:none!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-ux-page section .wdi-eye,
#wdi-ux-page section .mcl-eye,
#wdi-ux-page section .mws-eye,
#wdi-ux-page section .mdg-eye,
#wdi-ux-page section .msol-eyebrow,
#wdi-ux-page section .mind-eyebrow,
#wdi-ux-page section .pr-eyebrow,
#wdi-ux-page section .mte-eyebrow,
#wdi-ux-page section .mai-eyebrow,
#wdi-ux-page section .ts-eyebrow,
#wdi-ux-page section .aisay-eye,
#wdi-ux-page section .wby-eye,
#wdi-ux-page section .mrs-eye,
#wdi-ux-page section .fq-eyebrow,
#wdi-ux-page section .spm-eye,
#wdi-ux-page section .avv-eyebrow,
#wdi-ux-page section .lfv-eyebrow,
#wdi-ux-page #work .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1!important;}
#wdi-ux-page section .wdi-eye::before,
#wdi-ux-page section .mcl-eye::before,
#wdi-ux-page section .mws-eye::before,
#wdi-ux-page section .mdg-eye::before,
#wdi-ux-page section .msol-eyebrow::before,
#wdi-ux-page section .mind-eyebrow::before,
#wdi-ux-page section .pr-eyebrow::before,
#wdi-ux-page section .mte-eyebrow::before,
#wdi-ux-page section .mai-eyebrow::before,
#wdi-ux-page section .ts-eyebrow::before,
#wdi-ux-page section .aisay-eye::before,
#wdi-ux-page section .wby-eye::before,
#wdi-ux-page section .mrs-eye::before,
#wdi-ux-page section .fq-eyebrow::before,
#wdi-ux-page section .spm-eye::before,
#wdi-ux-page section .avv-eyebrow::before,
#wdi-ux-page section .lfv-eyebrow::before,
#wdi-ux-page #work .pp-projects-head .eyebrow::before{
  content:""!important;width:22px!important;height:1.5px!important;flex:none!important;
  background:currentColor!important;border-radius:0!important;box-shadow:none!important;
  opacity:.85!important;animation:none!important;margin:0!important;}

/* ============================================================
   11 · INDUSTRIES WE SERVE — horizontal card rail
   ============================================================ */
#wdi-ux-page .mind{background:#0B0C0E;color:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(48px,5.4vw,80px);overflow:hidden;}
#wdi-ux-page .mind-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start;
  padding-bottom:clamp(40px,4.6vw,72px);}
#wdi-ux-page .mind-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(18px,2.2vw,26px);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page .mind-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--rose-400);
  box-shadow:0 0 0 3px rgba(249,47,100,.2);}
#wdi-ux-page .mind-h{margin:0;font-size:clamp(34px,5vw,76px);font-weight:400;letter-spacing:-0.05em;
  line-height:1.02;color:#fff;max-width:16ch;}
#wdi-ux-page .mind-lead{margin:0;font-size:clamp(15px,1.22vw,17px);font-weight:400;line-height:1.66;
  color:rgba(255,255,255,.66);max-width:62ch;}
/* rail */
#wdi-ux-page .mic-rail{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;
  scroll-snap-type:x proximity;padding:0 0 clamp(20px,2.4vw,32px);}
#wdi-ux-page .mic-rail::-webkit-scrollbar{display:none;}
#wdi-ux-page .mic-rail:active{cursor:grabbing;}
#wdi-ux-page .mic-track{display:flex;gap:22px;padding:0 var(--gutter);width:max-content;}
/* card */
#wdi-ux-page .mic-card{position:relative;flex:none;width:clamp(280px,26vw,400px);aspect-ratio:1/1;
  display:flex;flex-direction:column;padding:clamp(24px,2.4vw,32px);border-radius:4px;
  background:#141519;border:1px solid rgba(255,255,255,.08);overflow:hidden;isolation:isolate;
  scroll-snap-align:center;transition:background .4s ease,border-color .4s ease,transform .5s var(--ease);}
#wdi-ux-page .mic-card:hover{background:#181A1F;border-color:rgba(249,47,100,.34);transform:translateY(-4px);}
#wdi-ux-page .mic-glow{position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;border-radius:50%;
  z-index:-1;pointer-events:none;opacity:0;transition:opacity .55s ease;
  background:radial-gradient(circle,rgba(249,47,100,.28),rgba(122,0,255,.16) 46%,transparent 72%);
  filter:blur(14px);}
#wdi-ux-page .mic-card:hover .mic-glow{opacity:1;}
#wdi-ux-page .mic-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
#wdi-ux-page .mic-card h3{margin:0;font-size:clamp(19px,1.7vw,25px);font-weight:400;letter-spacing:-0.035em;
  line-height:1.14;color:#fff;max-width:14ch;}
#wdi-ux-page .mic-ar{flex:none;width:22px;height:22px;color:rgba(255,255,255,.5);
  transition:color .3s ease,transform .35s var(--ease);}
#wdi-ux-page .mic-ar svg{width:100%;height:100%;display:block;}
#wdi-ux-page .mic-card:hover .mic-ar{color:var(--rose-300);transform:translate(3px,-3px);}
#wdi-ux-page .mic-card p{margin:clamp(14px,1.6vw,20px) 0 0;font-size:13.5px;font-weight:400;line-height:1.66;
  color:rgba(255,255,255,.56);transition:color .4s ease;}
#wdi-ux-page .mic-card:hover p{color:rgba(255,255,255,.74);}
#wdi-ux-page .mic-tags{margin-top:auto;padding-top:clamp(16px,1.8vw,22px);display:flex;flex-wrap:wrap;gap:6px;
  opacity:0;transform:translateY(6px);transition:opacity .42s ease,transform .45s var(--ease);}
#wdi-ux-page .mic-card:hover .mic-tags,#wdi-ux-page .mic-card:focus-within .mic-tags{opacity:1;transform:none;}
#wdi-ux-page .mic-tags span{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px;}
#wdi-ux-page .mic-n{position:absolute;right:clamp(24px,2.4vw,32px);bottom:clamp(20px,2.2vw,28px);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.2);
  transition:color .4s ease;}
#wdi-ux-page .mic-card:hover .mic-n{color:var(--rose-300);}
/* nav */
#wdi-ux-page .mic-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:clamp(20px,2.4vw,32px);}
#wdi-ux-page .mic-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.34);}
#wdi-ux-page .mic-btns{display:flex;gap:10px;}
#wdi-ux-page .mic-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;
  transition:background .3s ease,border-color .3s ease,transform .3s var(--ease);}
#wdi-ux-page .mic-btn svg{width:16px;height:16px;}
#wdi-ux-page .mic-btn:hover{background:var(--rose-500);border-color:var(--rose-500);transform:translateY(-2px);}
#wdi-ux-page .mic-btn:focus-visible{outline:2px solid var(--rose-400);outline-offset:3px;}
@media(hover:none){#wdi-ux-page .mic-tags{opacity:1;transform:none;}}
@media(max-width:940px){
  #wdi-ux-page .mind-top{grid-template-columns:1fr;gap:20px;}
  #wdi-ux-page .mic-card{width:min(84vw,340px);}
}
/* ---- light mode for the industries section ---- */
#wdi-ux-page .mind.is-light{background:#fff;color:var(--ink);}
#wdi-ux-page .mind.is-light .mind-eyebrow{color:var(--rose-600);}
#wdi-ux-page .mind.is-light .mind-eyebrow i{background:var(--rose-500);box-shadow:0 0 0 3px rgba(249,47,100,.16);}
#wdi-ux-page .mind.is-light .mind-h{color:var(--ink);}
#wdi-ux-page .mind.is-light .mind-lead{color:var(--muted);}
#wdi-ux-page .mind.is-light .mind-theme{background:#F4F4F5;border-color:var(--line-2);color:var(--ink-2);}
#wdi-ux-page .mind.is-light .mind-theme:hover{background:#EAEAEE;border-color:var(--line-2);}
#wdi-ux-page .mind.is-light .mic-card{background:#F6F6F7;border-color:var(--line);}
#wdi-ux-page .mind.is-light .mic-card:hover{background:#F1F1F3;border-color:rgba(249,47,100,.34);}
#wdi-ux-page .mind.is-light .mic-card h3{color:var(--ink);}
#wdi-ux-page .mind.is-light .mic-card p{color:var(--muted);}
#wdi-ux-page .mind.is-light .mic-card:hover p{color:var(--ink-2);}
#wdi-ux-page .mind.is-light .mic-ar{color:var(--faint);}
#wdi-ux-page .mind.is-light .mic-card:hover .mic-ar{color:var(--rose-600);}
#wdi-ux-page .mind.is-light .mic-tags span{color:var(--ink-2);border-color:var(--line-2);}
#wdi-ux-page .mind.is-light .mic-n{color:var(--line-2);}
#wdi-ux-page .mind.is-light .mic-card:hover .mic-n{color:var(--rose-600);}
#wdi-ux-page .mind.is-light .mic-glow{background:radial-gradient(circle,rgba(249,47,100,.16),rgba(122,0,255,.09) 46%,transparent 72%);}
#wdi-ux-page .mind.is-light .mic-hint{color:var(--faint);}
#wdi-ux-page .mind.is-light .mic-btn{border-color:var(--line-2);color:var(--ink);}
#wdi-ux-page .mind.is-light .mic-btn:hover{background:var(--rose-500);border-color:var(--rose-500);color:#fff;}
/* industry card: relevant vector, quiet in the background */
#wdi-ux-page .mic-vec{position:absolute;right:clamp(-14px,-1.2vw,-8px);bottom:clamp(-16px,-1.4vw,-10px);
  width:clamp(112px,11vw,158px);z-index:0;pointer-events:none;color:rgba(255,255,255,.1);
  transition:color .45s ease,transform .6s var(--ease);}
#wdi-ux-page .mic-vec svg{width:100%;height:auto;display:block;}
#wdi-ux-page .mic-card:hover .mic-vec{color:rgba(249,47,100,.3);transform:translate(-4px,-4px);}
#wdi-ux-page .mind.is-light .mic-vec{color:rgba(11,12,14,.08);}
#wdi-ux-page .mind.is-light .mic-card:hover .mic-vec{color:rgba(249,47,100,.26);}
#wdi-ux-page .mic-card > *:not(.mic-vec):not(.mic-glow){position:relative;z-index:1;}
/* ============================================================
   11 · INDUSTRIES WE SERVE — horizontal card rail
   ============================================================ */
#wdi-ux-page .mind{background:#0B0C0E;color:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(48px,5.4vw,80px);overflow:hidden;}
#wdi-ux-page .mind-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start;
  padding-bottom:clamp(40px,4.6vw,72px);}
#wdi-ux-page .mind-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(18px,2.2vw,26px);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page .mind-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--rose-400);
  box-shadow:0 0 0 3px rgba(249,47,100,.2);}
#wdi-ux-page .mind-h{margin:0;font-size:clamp(34px,5vw,76px);font-weight:400;letter-spacing:-0.05em;
  line-height:1.02;color:#fff;max-width:16ch;}
#wdi-ux-page .mind-lead{margin:0;font-size:clamp(15px,1.22vw,17px);font-weight:400;line-height:1.66;
  color:rgba(255,255,255,.66);max-width:62ch;}
/* rail */
#wdi-ux-page .mic-rail{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;
  scroll-snap-type:x proximity;padding:0 0 clamp(20px,2.4vw,32px);}
#wdi-ux-page .mic-rail::-webkit-scrollbar{display:none;}
#wdi-ux-page .mic-rail:active{cursor:grabbing;}
#wdi-ux-page .mic-track{display:flex;gap:22px;padding:0 var(--gutter);width:max-content;}
/* card */
#wdi-ux-page .mic-card{position:relative;flex:none;width:clamp(280px,26vw,400px);aspect-ratio:1/1;
  display:flex;flex-direction:column;padding:clamp(24px,2.4vw,32px);border-radius:4px;
  background:#141519;border:1px solid rgba(255,255,255,.08);overflow:hidden;isolation:isolate;
  scroll-snap-align:center;transition:background .4s ease,border-color .4s ease,transform .5s var(--ease);}
#wdi-ux-page .mic-card:hover{background:#181A1F;border-color:rgba(249,47,100,.34);transform:translateY(-4px);}
#wdi-ux-page .mic-glow{position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;border-radius:50%;
  z-index:-1;pointer-events:none;opacity:0;transition:opacity .55s ease;
  background:radial-gradient(circle,rgba(249,47,100,.28),rgba(122,0,255,.16) 46%,transparent 72%);
  filter:blur(14px);}
#wdi-ux-page .mic-card:hover .mic-glow{opacity:1;}
#wdi-ux-page .mic-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
#wdi-ux-page .mic-card h3{margin:0;font-size:clamp(19px,1.7vw,25px);font-weight:400;letter-spacing:-0.035em;
  line-height:1.14;color:#fff;max-width:14ch;}
#wdi-ux-page .mic-ar{flex:none;width:22px;height:22px;color:rgba(255,255,255,.5);
  transition:color .3s ease,transform .35s var(--ease);}
#wdi-ux-page .mic-ar svg{width:100%;height:100%;display:block;}
#wdi-ux-page .mic-card:hover .mic-ar{color:var(--rose-300);transform:translate(3px,-3px);}
#wdi-ux-page .mic-card p{margin:clamp(14px,1.6vw,20px) 0 0;font-size:13.5px;font-weight:400;line-height:1.66;
  color:rgba(255,255,255,.56);transition:color .4s ease;}
#wdi-ux-page .mic-card:hover p{color:rgba(255,255,255,.74);}
#wdi-ux-page .mic-tags{margin-top:auto;padding-top:clamp(16px,1.8vw,22px);display:flex;flex-wrap:wrap;gap:6px;
  opacity:0;transform:translateY(6px);transition:opacity .42s ease,transform .45s var(--ease);}
#wdi-ux-page .mic-card:hover .mic-tags,#wdi-ux-page .mic-card:focus-within .mic-tags{opacity:1;transform:none;}
#wdi-ux-page .mic-tags span{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px;}
#wdi-ux-page .mic-n{position:absolute;right:clamp(24px,2.4vw,32px);bottom:clamp(20px,2.2vw,28px);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.2);
  transition:color .4s ease;}
#wdi-ux-page .mic-card:hover .mic-n{color:var(--rose-300);}
/* nav */
#wdi-ux-page .mic-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:clamp(20px,2.4vw,32px);}
#wdi-ux-page .mic-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.34);}
#wdi-ux-page .mic-btns{display:flex;gap:10px;}
#wdi-ux-page .mic-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;
  transition:background .3s ease,border-color .3s ease,transform .3s var(--ease);}
#wdi-ux-page .mic-btn svg{width:16px;height:16px;}
#wdi-ux-page .mic-btn:hover{background:var(--rose-500);border-color:var(--rose-500);transform:translateY(-2px);}
#wdi-ux-page .mic-btn:focus-visible{outline:2px solid var(--rose-400);outline-offset:3px;}
@media(hover:none){#wdi-ux-page .mic-tags{opacity:1;transform:none;}}
@media(max-width:940px){
  #wdi-ux-page .mind-top{grid-template-columns:1fr;gap:20px;}
  #wdi-ux-page .mic-card{width:min(84vw,340px);}
}
/* ---- light mode for the industries section ---- */
#wdi-ux-page .mind.is-light{background:#fff;color:var(--ink);}
#wdi-ux-page .mind.is-light .mind-eyebrow{color:var(--rose-600);}
#wdi-ux-page .mind.is-light .mind-eyebrow i{background:var(--rose-500);box-shadow:0 0 0 3px rgba(249,47,100,.16);}
#wdi-ux-page .mind.is-light .mind-h{color:var(--ink);}
#wdi-ux-page .mind.is-light .mind-lead{color:var(--muted);}
#wdi-ux-page .mind.is-light .mind-theme{background:#F4F4F5;border-color:var(--line-2);color:var(--ink-2);}
#wdi-ux-page .mind.is-light .mind-theme:hover{background:#EAEAEE;border-color:var(--line-2);}
#wdi-ux-page .mind.is-light .mic-card{background:#F6F6F7;border-color:var(--line);}
#wdi-ux-page .mind.is-light .mic-card:hover{background:#F1F1F3;border-color:rgba(249,47,100,.34);}
#wdi-ux-page .mind.is-light .mic-card h3{color:var(--ink);}
#wdi-ux-page .mind.is-light .mic-card p{color:var(--muted);}
#wdi-ux-page .mind.is-light .mic-card:hover p{color:var(--ink-2);}
#wdi-ux-page .mind.is-light .mic-ar{color:var(--faint);}
#wdi-ux-page .mind.is-light .mic-card:hover .mic-ar{color:var(--rose-600);}
#wdi-ux-page .mind.is-light .mic-tags span{color:var(--ink-2);border-color:var(--line-2);}
#wdi-ux-page .mind.is-light .mic-n{color:var(--line-2);}
#wdi-ux-page .mind.is-light .mic-card:hover .mic-n{color:var(--rose-600);}
#wdi-ux-page .mind.is-light .mic-glow{background:radial-gradient(circle,rgba(249,47,100,.16),rgba(122,0,255,.09) 46%,transparent 72%);}
#wdi-ux-page .mind.is-light .mic-hint{color:var(--faint);}
#wdi-ux-page .mind.is-light .mic-btn{border-color:var(--line-2);color:var(--ink);}
#wdi-ux-page .mind.is-light .mic-btn:hover{background:var(--rose-500);border-color:var(--rose-500);color:#fff;}
/* industry card: relevant vector, quiet in the background */
#wdi-ux-page .mic-vec{position:absolute;right:clamp(-14px,-1.2vw,-8px);bottom:clamp(-16px,-1.4vw,-10px);
  width:clamp(112px,11vw,158px);z-index:0;pointer-events:none;color:rgba(255,255,255,.1);
  transition:color .45s ease,transform .6s var(--ease);}
#wdi-ux-page .mic-vec svg{width:100%;height:auto;display:block;}
#wdi-ux-page .mic-card:hover .mic-vec{color:rgba(249,47,100,.3);transform:translate(-4px,-4px);}
#wdi-ux-page .mind.is-light .mic-vec{color:rgba(11,12,14,.08);}
#wdi-ux-page .mind.is-light .mic-card:hover .mic-vec{color:rgba(249,47,100,.26);}
#wdi-ux-page .mic-card > *:not(.mic-vec):not(.mic-glow){position:relative;z-index:1;}
/* recognition pins; industries rises over it */

#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer{position:relative;z-index:3;}
@media(max-width:760px){
  #wdi-ux-page .t02-cta-band[data-screen-label="Recognition"]{position:relative;top:auto;}
  #wdi-ux-page .mind{border-radius:0;box-shadow:none;}
}
/* industries: normal section again — no pin, no horizontal drive */
  transform:none!important;transition:none!important;

/* recognition CTA pins; industries reveals over it */
#wdi-ux-page .mind{position:relative;z-index:3;border-radius:26px 26px 0 0;
  box-shadow:0 -30px 70px rgba(11,12,14,.3);}
#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer{position:relative;z-index:3;}
@media(max-width:760px){
  #wdi-ux-page .t02-cta-band[data-screen-label="Recognition"]{position:relative!important;top:auto!important;}
  #wdi-ux-page .mind{border-radius:0;box-shadow:none;}
}
/* ---- premium reveal: CTA holds, industries rises from the bottom ---- */
#wdi-ux-page .mind{position:relative;z-index:4;margin-top:-40vh;
  border-radius:28px 28px 0 0;box-shadow:0 -40px 90px rgba(11,12,14,.42);}
#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer{position:relative;z-index:4;}
@media(max-width:760px){
  #wdi-ux-page .mind{margin-top:0;border-radius:0;box-shadow:none;}
}
/* solutions + CTA hold in flow; industries slides up and covers both */
  bottom:0!important;z-index:2!important;
#wdi-ux-page .mind{position:relative!important;z-index:5!important;margin-top:0!important;
  border-radius:28px 28px 0 0!important;box-shadow:0 -40px 90px rgba(11,12,14,.45)!important;}
#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer{position:relative;z-index:5;}
@media(max-width:760px){
  #wdi-ux-page .msol,#wdi-ux-page .t02-cta-band[data-screen-label="Recognition"]{position:relative!important;top:auto!important;bottom:auto!important;}
  #wdi-ux-page .mind{border-radius:0!important;box-shadow:none!important;}
}
#wdi-ux-page .mind{position:relative!important;z-index:3!important;margin-top:-6vh!important;
  border-radius:28px 28px 0 0!important;box-shadow:0 -34px 80px rgba(11,12,14,.4)!important;}
#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer{position:relative;z-index:3;}
@media(max-width:760px){#wdi-ux-page .mind{margin-top:0!important;border-radius:0!important;box-shadow:none!important;}}
/* every panel from industries onward rides above and covers it */
#wdi-ux-page .mind{position:relative!important;z-index:3!important;margin-top:0!important;
  border-radius:28px 28px 0 0!important;box-shadow:0 -36px 84px rgba(11,12,14,.44)!important;}
#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer{position:relative;z-index:3;background:#fff;}
@media(max-width:760px){
  #wdi-ux-page .cov-stage{position:relative;top:auto;}
  #wdi-ux-page .mind{border-radius:0!important;box-shadow:none!important;}
}
/* industries and everything after it ride over the pinned stage */
#wdi-ux-page .mind{position:relative!important;z-index:6!important;
  border-radius:28px 28px 0 0!important;box-shadow:0 -40px 90px rgba(11,12,14,.5)!important;}
#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer,#wdi-ux-page .mind ~ div:not(.wdi-guide){position:relative!important;z-index:6!important;}
@media(max-width:760px){
  #wdi-ux-page .cov-stage{position:relative!important;height:auto!important;overflow:visible!important;}
  #wdi-ux-page .mind{border-radius:0!important;box-shadow:none!important;}
}
#wdi-ux-page .mind{position:relative!important;z-index:6!important;margin-top:-88vh!important;
  border-radius:28px 28px 0 0!important;box-shadow:0 -44px 96px rgba(11,12,14,.5)!important;}
#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer,#wdi-ux-page .mind ~ div:not(.wdi-guide){position:relative!important;z-index:6!important;}
@media(max-width:760px){
  #wdi-ux-page .cov-track{padding-bottom:0!important;}
  #wdi-ux-page .mind{margin-top:0!important;border-radius:0!important;box-shadow:none!important;}
}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
#wdi-ux-page .wdi-eye,
#wdi-ux-page .mcl-eye,
#wdi-ux-page .mws-eye,
#wdi-ux-page .mdg-eye,
#wdi-ux-page .msol-eyebrow,
#wdi-ux-page .mind-eyebrow,
#wdi-ux-page .pr-eyebrow,
#wdi-ux-page .mte-eyebrow,
#wdi-ux-page .mai-eyebrow,
#wdi-ux-page .ts-eyebrow,
#wdi-ux-page .aisay-eye,
#wdi-ux-page .wby-eye,
#wdi-ux-page .mrs-eye,
#wdi-ux-page .fq-eyebrow,
#wdi-ux-page .spm-eye,
#wdi-ux-page .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  line-height:1!important;margin:0 0 18px!important;
  color:#F92F64!important;}
#wdi-ux-page .wdi-eye::before,
#wdi-ux-page .mcl-eye::before,
#wdi-ux-page .mws-eye::before,
#wdi-ux-page .mdg-eye::before,
#wdi-ux-page .msol-eyebrow::before,
#wdi-ux-page .mind-eyebrow::before,
#wdi-ux-page .pr-eyebrow::before,
#wdi-ux-page .mte-eyebrow::before,
#wdi-ux-page .mai-eyebrow::before,
#wdi-ux-page .ts-eyebrow::before,
#wdi-ux-page .aisay-eye::before,
#wdi-ux-page .wby-eye::before,
#wdi-ux-page .mrs-eye::before,
#wdi-ux-page .fq-eyebrow::before,
#wdi-ux-page .spm-eye::before,
#wdi-ux-page .pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
/* the old inline dash markers are replaced by the ::before rule */
#wdi-ux-page .mcl-eye>i,#wdi-ux-page .mws-eye>i,#wdi-ux-page .msol-eyebrow>i,#wdi-ux-page .mind-eyebrow>i,#wdi-ux-page .mte-eyebrow>i,#wdi-ux-page .mai-eyebrow>i,#wdi-ux-page .aisay-eye>i{display:none!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-ux-page section .wdi-eye,
#wdi-ux-page section .mcl-eye,
#wdi-ux-page section .mws-eye,
#wdi-ux-page section .mdg-eye,
#wdi-ux-page section .msol-eyebrow,
#wdi-ux-page section .mind-eyebrow,
#wdi-ux-page section .pr-eyebrow,
#wdi-ux-page section .mte-eyebrow,
#wdi-ux-page section .mai-eyebrow,
#wdi-ux-page section .ts-eyebrow,
#wdi-ux-page section .aisay-eye,
#wdi-ux-page section .wby-eye,
#wdi-ux-page section .mrs-eye,
#wdi-ux-page section .fq-eyebrow,
#wdi-ux-page section .spm-eye,
#wdi-ux-page section .avv-eyebrow,
#wdi-ux-page section .lfv-eyebrow,
#wdi-ux-page #work .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1!important;}
#wdi-ux-page section .wdi-eye::before,
#wdi-ux-page section .mcl-eye::before,
#wdi-ux-page section .mws-eye::before,
#wdi-ux-page section .mdg-eye::before,
#wdi-ux-page section .msol-eyebrow::before,
#wdi-ux-page section .mind-eyebrow::before,
#wdi-ux-page section .pr-eyebrow::before,
#wdi-ux-page section .mte-eyebrow::before,
#wdi-ux-page section .mai-eyebrow::before,
#wdi-ux-page section .ts-eyebrow::before,
#wdi-ux-page section .aisay-eye::before,
#wdi-ux-page section .wby-eye::before,
#wdi-ux-page section .mrs-eye::before,
#wdi-ux-page section .fq-eyebrow::before,
#wdi-ux-page section .spm-eye::before,
#wdi-ux-page section .avv-eyebrow::before,
#wdi-ux-page section .lfv-eyebrow::before,
#wdi-ux-page #work .pp-projects-head .eyebrow::before{
  content:""!important;width:22px!important;height:1.5px!important;flex:none!important;
  background:currentColor!important;border-radius:0!important;box-shadow:none!important;
  opacity:.85!important;animation:none!important;margin:0!important;}
#wdi-ux-page .mind{min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:940px),(prefers-reduced-motion:reduce){
  #wdi-ux-page .cov-stage,#wdi-ux-page .mind{min-height:0;display:block;}
  #wdi-ux-page .cvr-lift,#wdi-ux-page .cov-track{transform:none!important;}
}
#wdi-ux-page .mind{position:relative!important;z-index:6!important;margin-top:-88vh!important;
  min-height:100vh!important;display:block!important;
  border-radius:30px 30px 0 0!important;box-shadow:0 -46px 100px rgba(11,12,14,.55)!important;}
#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer,#wdi-ux-page .mind ~ div:not(.wdi-guide){position:relative!important;z-index:6!important;}
@media(max-width:940px),(prefers-reduced-motion:reduce){
  #wdi-ux-page .cov-track{padding-bottom:0!important;background:none;}
  #wdi-ux-page .cov-stage{position:relative!important;min-height:0!important;display:block!important;
    transform:none!important;filter:none!important;}
  #wdi-ux-page .mind{margin-top:0!important;min-height:0!important;border-radius:0!important;box-shadow:none!important;}
}
/* cream canvas must beat the .mind ~ section white reset */
#wdi-ux-page section.mai2{background:#F4F1EC!important;}
/* industries: capability tags always visible, as pink bullet points */
#wdi-ux-page .mic-tags{opacity:1!important;transform:none!important;gap:7px 18px;}
#wdi-ux-page .mic-tags span{border:0!important;border-radius:0!important;padding:0 0 0 14px!important;position:relative;}
#wdi-ux-page .mic-tags span::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--rose-500,#F92F64);}
#wdi-ux-page .mind.is-light .mic-tags span::before{background:var(--rose-600,#E01254);}
/* industry cards: uniform 2-line titles, 4-line body, refined bullet list */
#wdi-ux-page .mic-card .mic-top h3{line-height:1.12;min-height:2.24em;}
#wdi-ux-page .mic-card > p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(4 * 1.62em);line-height:1.62;}
#wdi-ux-page .mic-tags{display:grid!important;grid-template-columns:1fr 1fr;gap:10px 20px;align-content:start;}
#wdi-ux-page .mic-tags span{font-size:12px!important;font-weight:400;letter-spacing:.01em;line-height:1.35;
  color:rgba(255,255,255,.66)!important;padding:0 0 0 16px!important;}
#wdi-ux-page .mic-tags span::before{width:5px;height:5px;top:.5em;
  background:var(--rose-500,#F92F64);box-shadow:0 0 0 3px rgba(249,47,100,.16);}
#wdi-ux-page .mic-card:hover .mic-tags span{color:rgba(255,255,255,.85)!important;}
#wdi-ux-page .mind.is-light .mic-tags span{color:var(--ink-2)!important;}
@media(max-width:940px){#wdi-ux-page .mic-card .mic-top h3{min-height:0;}#wdi-ux-page .mic-card > p{min-height:0;}}
/* industry tags: always exactly one line each */
#wdi-ux-page .mic-tags span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px!important;}
@media(max-width:1280px){#wdi-ux-page .mic-tags span{font-size:11px!important;letter-spacing:0;}}

/* this page: industries is a normal section — no overlap onto the solutions above */
#wdi-ux-page section.mind{margin-top:0!important;min-height:0!important;border-radius:0!important;box-shadow:none!important;
  z-index:auto!important;display:block!important;}
#wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer,#wdi-ux-page .mind ~ div:not(.wdi-guide){z-index:auto!important;}

/* slide-over after solution 08: solutions pins by its bottom edge, industries rises over it */
@media(min-width:941px){
  #wdi-ux-page #solutions{position:sticky!important;top:var(--msolTop,0px)!important;z-index:1!important;}
  #wdi-ux-page section.mind{position:relative!important;z-index:3!important;
    border-radius:28px 28px 0 0!important;box-shadow:0 -40px 90px rgba(11,12,14,.42)!important;}
  #wdi-ux-page .mind ~ section,#wdi-ux-page .mind ~ footer,#wdi-ux-page .mind ~ div:not(.wdi-guide){position:relative!important;z-index:3!important;}
}

#wdi-ux-page .wdi-guide{position:fixed!important;z-index:130!important;}

/* industries: horizontal rail advances on scroll before the page continues */

#wdi-ux-page .pra-sec{position:relative;z-index:3;background:#fff;}
#wdi-ux-page .pra-sec .pr-h .amp{color:var(--muted);}
/* [1] industries: pin while the rail scrolls horizontally */

#wdi-ux-page .pra-sec{position:relative;z-index:3;}
/* process ramp — matched to the Mobile App Development page */
#wdi-ux-page #process .pra-card:nth-child(1){top:90px; background:#FFFFFF!important;color:var(--ink)!important;border:1px solid var(--line);}
#wdi-ux-page #process .pra-card:nth-child(2){top:120px;background:#FFF0F4!important;color:var(--ink)!important;border:1px solid transparent;}
#wdi-ux-page #process .pra-card:nth-child(3){top:150px;background:#FFD8E3!important;color:var(--ink)!important;}
#wdi-ux-page #process .pra-card:nth-child(4){top:180px;background:#FFA8C0!important;color:var(--ink)!important;}
#wdi-ux-page #process .pra-card:nth-child(5){top:210px;background:#F92F64!important;color:#fff!important;}
#wdi-ux-page #process .pra-card:nth-child(6){top:240px;background:#8A0A2B!important;color:#fff!important;}
#wdi-ux-page #process .pra-card:nth-child(7){top:270px;background:#0B0C0E!important;color:#fff!important;}
#wdi-ux-page #process .pra-card:nth-child(-n+4):hover .pra-toggle{background:rgba(0,0,0,.04);}
#wdi-ux-page #process .pra-card:nth-child(n+5) .pra-detail-body .aeo{border-left-color:var(--rose-300);}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
#wdi-ux-page .wdi-eye,
#wdi-ux-page .mcl-eye,
#wdi-ux-page .mws-eye,
#wdi-ux-page .mdg-eye,
#wdi-ux-page .msol-eyebrow,
#wdi-ux-page .mind-eyebrow,
#wdi-ux-page .pr-eyebrow,
#wdi-ux-page .mte-eyebrow,
#wdi-ux-page .mai-eyebrow,
#wdi-ux-page .ts-eyebrow,
#wdi-ux-page .aisay-eye,
#wdi-ux-page .wby-eye,
#wdi-ux-page .mrs-eye,
#wdi-ux-page .fq-eyebrow,
#wdi-ux-page .spm-eye,
#wdi-ux-page .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  line-height:1!important;margin:0 0 18px!important;
  color:#F92F64!important;}
#wdi-ux-page .wdi-eye::before,
#wdi-ux-page .mcl-eye::before,
#wdi-ux-page .mws-eye::before,
#wdi-ux-page .mdg-eye::before,
#wdi-ux-page .msol-eyebrow::before,
#wdi-ux-page .mind-eyebrow::before,
#wdi-ux-page .pr-eyebrow::before,
#wdi-ux-page .mte-eyebrow::before,
#wdi-ux-page .mai-eyebrow::before,
#wdi-ux-page .ts-eyebrow::before,
#wdi-ux-page .aisay-eye::before,
#wdi-ux-page .wby-eye::before,
#wdi-ux-page .mrs-eye::before,
#wdi-ux-page .fq-eyebrow::before,
#wdi-ux-page .spm-eye::before,
#wdi-ux-page .pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-ux-page section .wdi-eye,
#wdi-ux-page section .mcl-eye,
#wdi-ux-page section .mws-eye,
#wdi-ux-page section .mdg-eye,
#wdi-ux-page section .msol-eyebrow,
#wdi-ux-page section .mind-eyebrow,
#wdi-ux-page section .pr-eyebrow,
#wdi-ux-page section .mte-eyebrow,
#wdi-ux-page section .mai-eyebrow,
#wdi-ux-page section .ts-eyebrow,
#wdi-ux-page section .aisay-eye,
#wdi-ux-page section .wby-eye,
#wdi-ux-page section .mrs-eye,
#wdi-ux-page section .fq-eyebrow,
#wdi-ux-page section .spm-eye,
#wdi-ux-page section .avv-eyebrow,
#wdi-ux-page section .lfv-eyebrow,
#wdi-ux-page #work .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1!important;}
#wdi-ux-page section .wdi-eye::before,
#wdi-ux-page section .mcl-eye::before,
#wdi-ux-page section .mws-eye::before,
#wdi-ux-page section .mdg-eye::before,
#wdi-ux-page section .msol-eyebrow::before,
#wdi-ux-page section .mind-eyebrow::before,
#wdi-ux-page section .pr-eyebrow::before,
#wdi-ux-page section .mte-eyebrow::before,
#wdi-ux-page section .mai-eyebrow::before,
#wdi-ux-page section .ts-eyebrow::before,
#wdi-ux-page section .aisay-eye::before,
#wdi-ux-page section .wby-eye::before,
#wdi-ux-page section .mrs-eye::before,
#wdi-ux-page section .fq-eyebrow::before,
#wdi-ux-page section .spm-eye::before,
#wdi-ux-page section .avv-eyebrow::before,
#wdi-ux-page section .lfv-eyebrow::before,
#wdi-ux-page #work .pp-projects-head .eyebrow::before{
  content:""!important;width:22px!important;height:1.5px!important;flex:none!important;
  background:currentColor!important;border-radius:0!important;box-shadow:none!important;
  opacity:.85!important;animation:none!important;margin:0!important;}
#wdi-ux-page section .pr-eyebrow,#wdi-ux-page section .fq-eyebrow{color:#F92F64!important;}
/* ============================================================
   Our Process — premium line-mask heading reveal
   ============================================================ */
#wdi-ux-page .pr-h.prx{display:block;}
#wdi-ux-page .pr-h.prx .prx-l{display:block;overflow:hidden;padding-bottom:.06em;}
#wdi-ux-page .pr-h.prx .prx-l i{display:block;font-style:inherit;
  transform:translateY(112%) rotate(1.6deg);opacity:0;
  transition:transform 1.15s cubic-bezier(.16,.84,.24,1),opacity .9s ease;}
#wdi-ux-page .prx-in .pr-h.prx .prx-l:nth-child(1) i{transition-delay:.06s;}
#wdi-ux-page .prx-in .pr-h.prx .prx-l:nth-child(2) i{transition-delay:.17s;}
#wdi-ux-page .prx-in .pr-h.prx .prx-l:nth-child(3) i{transition-delay:.28s;}
#wdi-ux-page .prx-in .pr-h.prx .prx-l i{transform:none;opacity:1;}
#wdi-ux-page .pra-left .prx-p{opacity:0;transform:translateY(18px);filter:blur(7px);
  transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.16,.84,.24,1),filter 1.05s ease;}
/* blur(0) still rasterises soft on mobile — drop the filter entirely when shown */
#wdi-ux-page .prx-in .prx-p{opacity:1;transform:none;filter:none;transition-delay:.44s;}
#wdi-ux-page .prx-in .prx-p2{transition-delay:.58s;}
#wdi-ux-page .pra-left .pr-eyebrow{opacity:0;transform:translateY(-8px);transition:opacity .7s ease,transform .7s var(--ease);}
#wdi-ux-page .prx-in .pr-eyebrow{opacity:1;transform:none;}
#wdi-ux-page .pra-left .pr-header-cta{opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,.84,.24,1);}
#wdi-ux-page .prx-in .pr-header-cta{opacity:1;transform:none;transition-delay:.72s;}
@media(max-width:900px),(prefers-reduced-motion:reduce){
  #wdi-ux-page .pr-h.prx .prx-l i,#wdi-ux-page .pra-left .prx-p,#wdi-ux-page .pra-left .pr-eyebrow,#wdi-ux-page .pra-left .pr-header-cta{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important;}}

/* AI page process ramp (same gradient; 07 black, stacked in front) */
#wdi-ux-page #ai-process .pra-card{position:sticky;}
#wdi-ux-page #ai-process .pra-card:nth-child(1){top:90px; background:#FFFFFF!important;color:var(--ink)!important;border:1px solid var(--line);z-index:1;}
#wdi-ux-page #ai-process .pra-card:nth-child(2){top:120px;background:#FFF0F4!important;color:var(--ink)!important;border:1px solid transparent;z-index:2;}
#wdi-ux-page #ai-process .pra-card:nth-child(3){top:150px;background:#FFD8E3!important;color:var(--ink)!important;z-index:3;}
#wdi-ux-page #ai-process .pra-card:nth-child(4){top:180px;background:#FFA8C0!important;color:var(--ink)!important;z-index:4;}
#wdi-ux-page #ai-process .pra-card:nth-child(5){top:210px;background:#F92F64!important;color:#fff!important;z-index:5;}
#wdi-ux-page #ai-process .pra-card:nth-child(6){top:240px;background:#8A0A2B!important;color:#fff!important;z-index:6;}
#wdi-ux-page #ai-process .pra-card:nth-child(7){top:270px;background:#0B0C0E!important;color:#fff!important;z-index:7;}
#wdi-ux-page #ai-process .pra-card:nth-child(-n+4):hover .pra-toggle{background:rgba(0,0,0,.04);}
#wdi-ux-page #ai-process .pra-card:nth-child(n+5) .pra-detail-body .aeo{border-left-color:var(--rose-300);}

/* ============================================================
   09 · MOBILE TECHNOLOGY EXPERTISE — rises over the CTA band
   ============================================================ */
#wdi-ux-page .mte{position:relative;z-index:3;background:#CFD4D8;color:var(--ink);
  border-radius:26px 26px 0 0;box-shadow:0 -30px 70px rgba(11,12,14,.28);
  padding:clamp(64px,7.4vw,116px) 0 clamp(56px,6.4vw,96px);}
#wdi-ux-page .mte ~ section,#wdi-ux-page .mte ~ footer{position:relative;z-index:3;}
#wdi-ux-page .mte-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start;}
#wdi-ux-page .mte-h{margin:0;font-size:clamp(40px,6.2vw,96px);font-weight:400;letter-spacing:-0.05em;
  line-height:1.0;color:var(--ink);}
#wdi-ux-page .mte-lead{margin:8px 0 0;max-width:60ch;font-size:clamp(15px,1.25vw,17px);font-weight:300;
  line-height:1.7;color:rgba(11,12,14,.62);align-self:end;}
#wdi-ux-page .mte-rule{margin:clamp(38px,4.4vw,64px) 0 0;height:1px;background:rgba(11,12,14,.16);}
#wdi-ux-page .mte-grid{margin-top:clamp(40px,4.6vw,72px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(34px,4vw,66px) clamp(30px,3.6vw,60px);}
#wdi-ux-page .mte-cell{display:flex;flex-direction:column;}
#wdi-ux-page .mte-ic{width:44px;height:44px;display:grid;place-items:center;color:var(--ink);
  transition:color .3s ease,transform .4s var(--ease);}
#wdi-ux-page .mte-ic svg{width:100%;height:100%;}
#wdi-ux-page .mte-cell:hover .mte-ic{color:var(--rose-600);transform:translateY(-3px);}
#wdi-ux-page .mte-cell h3{margin-top:clamp(22px,2.4vw,32px);font-size:clamp(20px,1.9vw,28px);font-weight:400;
  letter-spacing:-0.035em;line-height:1.14;color:var(--ink);max-width:14ch;min-height:2.3em;}
#wdi-ux-page .mte-cell p{margin-top:clamp(16px,1.8vw,24px);font-size:14.5px;font-weight:300;line-height:1.66;
  color:rgba(11,12,14,.6);max-width:38ch;}
@media(max-width:1020px){#wdi-ux-page .mte-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  #wdi-ux-page .t02-cta-band[data-screen-label="Recognition"]{position:relative;top:auto;}
  #wdi-ux-page .mte{border-radius:0;box-shadow:none;}
  #wdi-ux-page .mte-head{grid-template-columns:1fr;gap:18px;}
  #wdi-ux-page .mte-grid{grid-template-columns:1fr;}
  #wdi-ux-page .mte-cell h3{min-height:0;}
}
/* ---- technology section: match the reveal section's type benchmark ---- */
#wdi-ux-page .mte-h{font-size:clamp(26px,3.4vw,52px)!important;font-weight:500!important;
  letter-spacing:-0.035em!important;line-height:1.2!important;max-width:14ch;}
#wdi-ux-page .mte-lead{font-size:clamp(14px,1.1vw,16px)!important;line-height:1.66!important;max-width:52ch;}
#wdi-ux-page .mte-head-r{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(20px,2.2vw,28px);align-self:end;}
#wdi-ux-page .mte-cta{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;
  border:1px solid rgba(11,12,14,.22);border-radius:8px;background:transparent;color:var(--ink);
  font-size:13px;font-weight:500;letter-spacing:-0.01em;text-decoration:none;
  transition:border-color .3s ease,background .3s ease,color .3s ease,gap .3s ease;}
#wdi-ux-page .mte-cta svg{width:13px;height:13px;}
#wdi-ux-page .mte-cta:hover{border-color:var(--ink);background:var(--ink);color:#fff;gap:14px;}
#wdi-ux-page .mte-cta:focus-visible{outline:2px solid var(--rose-500);outline-offset:3px;}
/* cards: quieter, more professional rhythm */
#wdi-ux-page .mte-cell h3{font-size:clamp(17px,1.5vw,22px)!important;font-weight:500!important;
  letter-spacing:-0.03em!important;line-height:1.24!important;max-width:15ch;}
#wdi-ux-page .mte-cell p{font-size:14px!important;line-height:1.68!important;max-width:36ch;}
#wdi-ux-page .mte-ic{width:38px;height:38px;}
@media(max-width:760px){#wdi-ux-page .mte-head-r{align-self:start;}}
/* ---- shared icon tile: the notched shape from the services grid ---- */
#wdi-ux-page .mte-ic,#wdi-ux-page .mrs-ic{width:52px;height:52px;display:grid;place-items:center;border-radius:0;
  background:#fff;color:#0B0C0E;
  clip-path:polygon(0 0,100% 0,100% 68%,68% 100%,0 100%);
  transition:background .3s ease,color .3s ease,transform .4s var(--ease);}
#wdi-ux-page .mte-ic svg,#wdi-ux-page .mrs-ic svg{width:24px;height:24px;}
#wdi-ux-page .mte-cell:hover .mte-ic,#wdi-ux-page .mrs-cell:hover .mrs-ic{background:var(--rose-500);color:#fff;transform:none;}
/* technology cards: larger type, matching the services grid */
#wdi-ux-page .mte-cell h3{font-size:clamp(20px,1.9vw,27px)!important;font-weight:400!important;
  letter-spacing:-0.035em!important;line-height:1.14!important;max-width:14ch;}
#wdi-ux-page .mte-cell p{font-size:14.5px!important;line-height:1.66!important;max-width:38ch;}
/* ---- 09 technology: reference layout (white canvas, hairline rule, 3-up) ---- */
#wdi-ux-page .mte{background:#fff!important;}
#wdi-ux-page .mte-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(20px,2.4vw,30px);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-600);}
#wdi-ux-page .mte-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--rose-500);
  box-shadow:0 0 0 3px rgba(249,47,100,.16);}
/* header: headline left, lead right and top-aligned */
#wdi-ux-page .mte-head{align-items:start!important;}
#wdi-ux-page .mte-h{font-size:clamp(34px,5vw,76px)!important;font-weight:400!important;
  letter-spacing:-0.05em!important;line-height:1.02!important;max-width:16ch;}
#wdi-ux-page .mte-lead{align-self:start!important;font-size:clamp(15px,1.25vw,17px)!important;
  line-height:1.68!important;color:var(--muted)!important;max-width:62ch;}
#wdi-ux-page .mte-rule{background:var(--line)!important;}
/* grid: generous columns, icon → title → paragraph */
#wdi-ux-page .mte-grid{gap:clamp(44px,5vw,80px) clamp(34px,4vw,68px)!important;}
#wdi-ux-page .mte-ic{background:#F4F4F5!important;color:var(--ink)!important;}
#wdi-ux-page .mte-cell:hover .mte-ic{background:var(--rose-500)!important;color:#fff!important;}
#wdi-ux-page .mte-cell h3{margin-top:clamp(24px,2.6vw,34px)!important;font-size:clamp(20px,2.1vw,30px)!important;
  font-weight:500!important;letter-spacing:-0.035em!important;line-height:1.16!important;max-width:16ch;}
#wdi-ux-page .mte-cell p{margin-top:clamp(18px,2vw,26px)!important;font-size:14.5px!important;
  line-height:1.7!important;color:var(--muted)!important;max-width:40ch;}
#wdi-ux-page .mte-cta{border-color:var(--line-2)!important;}
/* card headings unified at the 34px ceiling across all three grids */
#wdi-ux-page .mws-card h3,#wdi-ux-page .mdg-cell h3,#wdi-ux-page .mrs-cell h3,#wdi-ux-page .mte-cell h3{
  font-size:clamp(20px,2.2vw,34px)!important;}
/* card body copy: weight 400, consistent size and colour across the grids */
#wdi-ux-page .mdg-cell p,#wdi-ux-page .mrs-cell p,#wdi-ux-page .mte-cell p{font-weight:400!important;font-size:14.5px!important;}
#wdi-ux-page .mte-cell p{color:#71757E!important;}
/* grid items: subtle grey wash on hover, plus the rose circle cursor */
#wdi-ux-page .mws-card,#wdi-ux-page .mdg-cell,#wdi-ux-page .mrs-cell,#wdi-ux-page .mte-cell{transition:background .38s ease,transform .5s var(--ease);}
#wdi-ux-page .mws-card,#wdi-ux-page .mte-cell{border-radius:16px;padding:clamp(20px,2.2vw,28px);margin:calc(-1 * clamp(20px,2.2vw,28px));}
#wdi-ux-page .mte-cell:hover{background:#F4F4F5;}
@media(hover:none){
  #wdi-ux-page .mws-card,#wdi-ux-page .mdg-cell,#wdi-ux-page .mrs-cell,#wdi-ux-page .mte-cell{cursor:auto!important;}
}
#wdi-ux-page .mte{position:relative;z-index:6;background:#fff;}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
#wdi-ux-page .wdi-eye,
#wdi-ux-page .mcl-eye,
#wdi-ux-page .mws-eye,
#wdi-ux-page .mdg-eye,
#wdi-ux-page .msol-eyebrow,
#wdi-ux-page .mind-eyebrow,
#wdi-ux-page .pr-eyebrow,
#wdi-ux-page .mte-eyebrow,
#wdi-ux-page .mai-eyebrow,
#wdi-ux-page .ts-eyebrow,
#wdi-ux-page .aisay-eye,
#wdi-ux-page .wby-eye,
#wdi-ux-page .mrs-eye,
#wdi-ux-page .fq-eyebrow,
#wdi-ux-page .spm-eye,
#wdi-ux-page .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  line-height:1!important;margin:0 0 18px!important;
  color:#F92F64!important;}
#wdi-ux-page .wdi-eye::before,
#wdi-ux-page .mcl-eye::before,
#wdi-ux-page .mws-eye::before,
#wdi-ux-page .mdg-eye::before,
#wdi-ux-page .msol-eyebrow::before,
#wdi-ux-page .mind-eyebrow::before,
#wdi-ux-page .pr-eyebrow::before,
#wdi-ux-page .mte-eyebrow::before,
#wdi-ux-page .mai-eyebrow::before,
#wdi-ux-page .ts-eyebrow::before,
#wdi-ux-page .aisay-eye::before,
#wdi-ux-page .wby-eye::before,
#wdi-ux-page .mrs-eye::before,
#wdi-ux-page .fq-eyebrow::before,
#wdi-ux-page .spm-eye::before,
#wdi-ux-page .pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
/* the old inline dash markers are replaced by the ::before rule */
#wdi-ux-page .mcl-eye>i,#wdi-ux-page .mws-eye>i,#wdi-ux-page .msol-eyebrow>i,#wdi-ux-page .mind-eyebrow>i,#wdi-ux-page .mte-eyebrow>i,#wdi-ux-page .mai-eyebrow>i,#wdi-ux-page .aisay-eye>i{display:none!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-ux-page section .wdi-eye,
#wdi-ux-page section .mcl-eye,
#wdi-ux-page section .mws-eye,
#wdi-ux-page section .mdg-eye,
#wdi-ux-page section .msol-eyebrow,
#wdi-ux-page section .mind-eyebrow,
#wdi-ux-page section .pr-eyebrow,
#wdi-ux-page section .mte-eyebrow,
#wdi-ux-page section .mai-eyebrow,
#wdi-ux-page section .ts-eyebrow,
#wdi-ux-page section .aisay-eye,
#wdi-ux-page section .wby-eye,
#wdi-ux-page section .mrs-eye,
#wdi-ux-page section .fq-eyebrow,
#wdi-ux-page section .spm-eye,
#wdi-ux-page section .avv-eyebrow,
#wdi-ux-page section .lfv-eyebrow,
#wdi-ux-page #work .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1!important;}
#wdi-ux-page section .wdi-eye::before,
#wdi-ux-page section .mcl-eye::before,
#wdi-ux-page section .mws-eye::before,
#wdi-ux-page section .mdg-eye::before,
#wdi-ux-page section .msol-eyebrow::before,
#wdi-ux-page section .mind-eyebrow::before,
#wdi-ux-page section .pr-eyebrow::before,
#wdi-ux-page section .mte-eyebrow::before,
#wdi-ux-page section .mai-eyebrow::before,
#wdi-ux-page section .ts-eyebrow::before,
#wdi-ux-page section .aisay-eye::before,
#wdi-ux-page section .wby-eye::before,
#wdi-ux-page section .mrs-eye::before,
#wdi-ux-page section .fq-eyebrow::before,
#wdi-ux-page section .spm-eye::before,
#wdi-ux-page section .avv-eyebrow::before,
#wdi-ux-page section .lfv-eyebrow::before,
#wdi-ux-page #work .pp-projects-head .eyebrow::before{
  content:""!important;width:22px!important;height:1.5px!important;flex:none!important;
  background:currentColor!important;border-radius:0!important;box-shadow:none!important;
  opacity:.85!important;animation:none!important;margin:0!important;}
/* ============================================================
   12 · AI IMPACT BY WDI — tiered capability grid (dark)
   ============================================================ */
#wdi-ux-page .mai{background:#0B0C0E;color:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(56px,6.4vw,96px);}
#wdi-ux-page .mai-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start;}
#wdi-ux-page .mai-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(18px,2.2vw,26px);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-300);}
#wdi-ux-page .mai-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--rose-400);
  box-shadow:0 0 0 3px rgba(249,47,100,.2);}
#wdi-ux-page .mai-h{margin:0;font-size:clamp(34px,5vw,76px);font-weight:400;letter-spacing:-0.05em;
  line-height:1.02;color:#fff;max-width:15ch;}
#wdi-ux-page .mai-lead{margin:0;font-size:clamp(15px,1.22vw,17px);font-weight:400;line-height:1.68;
  color:rgba(255,255,255,.72);max-width:62ch;}
#wdi-ux-page .mai-rule{margin:clamp(38px,4.4vw,64px) 0 clamp(20px,2.2vw,28px);height:1px;background:rgba(255,255,255,.12);}
#wdi-ux-page .mai-k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.4);}
/* tiers */
#wdi-ux-page .mai-grid{display:grid;gap:clamp(14px,1.5vw,22px);margin-top:clamp(24px,2.8vw,38px);}
#wdi-ux-page .mai-grid-feat{grid-template-columns:repeat(2,1fr);}
#wdi-ux-page .mai-grid-med{grid-template-columns:repeat(3,1fr);}
#wdi-ux-page .mai-grid-sm{grid-template-columns:repeat(3,1fr);}
/* shared card */
#wdi-ux-page .mai-c{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  background:#12141A;border:1px solid rgba(255,255,255,.09);
  transition:transform .5s var(--ease),border-color .4s ease,background .4s ease;}
#wdi-ux-page .mai-c:hover{transform:translateY(-4px);border-color:rgba(249,47,100,.36);background:#151821;}
#wdi-ux-page .mai-b{padding:clamp(22px,2.4vw,32px);}
#wdi-ux-page .mai-n{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--rose-300);}
#wdi-ux-page .mai-c h3{margin:12px 0 0;font-weight:500;letter-spacing:-0.03em;line-height:1.16;color:#fff;}
#wdi-ux-page .mai-c p{margin:12px 0 0;font-size:14px;font-weight:400;line-height:1.66;color:rgba(255,255,255,.62);}
/* feature tier: gradient media panel above the copy */
#wdi-ux-page .mai-media{position:relative;display:block;height:clamp(190px,19vw,280px);overflow:hidden;
  background:linear-gradient(150deg,#1B1E27,#141620 60%,#191320);}
#wdi-ux-page .mai-media-glow{position:absolute;inset:0;
  background:radial-gradient(74% 74% at 22% 18%,rgba(249,47,100,.34),transparent 62%),
             radial-gradient(64% 64% at 84% 86%,rgba(122,0,255,.26),transparent 66%);
  transition:opacity .55s ease;}
#wdi-ux-page .mai-c:hover .mai-media-glow{opacity:.78;}
#wdi-ux-page .mai-media-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(58px,5.6vw,78px);height:clamp(58px,5.6vw,78px);display:grid;place-items:center;
  border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;backdrop-filter:blur(8px);transition:transform .55s var(--ease);}
#wdi-ux-page .mai-media-ic svg{width:52%;height:52%;}
#wdi-ux-page .mai-c:hover .mai-media-ic{transform:translate(-50%,-50%) scale(1.06);}
#wdi-ux-page .mai-feat h3{font-size:clamp(21px,2.1vw,30px);}
#wdi-ux-page .mai-feat p{font-size:14.5px;max-width:46ch;}
/* medium + small tiers: notched icon tile inside the card */
#wdi-ux-page .mai-ic{margin:clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px) 0;width:52px;height:52px;
  display:grid;place-items:center;background:#fff;color:#0B0C0E;
  clip-path:polygon(0 0,100% 0,100% 68%,68% 100%,0 100%);
  transition:background .3s ease,color .3s ease;}
#wdi-ux-page .mai-ic svg{width:24px;height:24px;}
#wdi-ux-page .mai-c:hover .mai-ic{background:var(--rose-500);color:#fff;}
#wdi-ux-page .mai-med h3{font-size:clamp(18px,1.7vw,24px);}
#wdi-ux-page .mai-sm h3{font-size:clamp(17px,1.5vw,21px);}
#wdi-ux-page .mai-sm p{font-size:13.5px;}
#wdi-ux-page .mai-sm .mai-ic{width:44px;height:44px;}
#wdi-ux-page .mai-sm .mai-ic svg{width:21px;height:21px;}
/* reveal */
#wdi-ux-page .mai-c{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .8s var(--ease),border-color .4s ease,background .4s ease;}
#wdi-ux-page .mai-grid.in .mai-c{opacity:1;transform:none;}
#wdi-ux-page .mai-grid.in .mai-c:nth-child(1){transition-delay:0s;}
#wdi-ux-page .mai-grid.in .mai-c:nth-child(2){transition-delay:.08s;}
#wdi-ux-page .mai-grid.in .mai-c:nth-child(3){transition-delay:.16s;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .mai-c{opacity:1;transform:none;}}
@media(max-width:1020px){
  #wdi-ux-page .mai-grid-feat,#wdi-ux-page .mai-grid-med,#wdi-ux-page .mai-grid-sm{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:940px){#wdi-ux-page .mai-top{grid-template-columns:1fr;gap:18px;}}
@media(max-width:640px){
  #wdi-ux-page .mai-grid-feat,#wdi-ux-page .mai-grid-med,#wdi-ux-page .mai-grid-sm{grid-template-columns:1fr;}
}
/* AI tiers: always visible; reveal is an enhancement, never a gate */
#wdi-ux-page .mai-c{opacity:1!important;transform:none!important;}
#wdi-ux-page .mai-grid-med,#wdi-ux-page .mai-grid-sm{opacity:1;}
/* lead paragraph baseline-aligns with the headline, not the eyebrow */
#wdi-ux-page .mai-top{align-items:start;}
#wdi-ux-page .mai-lead{padding-top:calc(12px + 1.4em);}
@media(max-width:940px){#wdi-ux-page .mai-lead{padding-top:0;}}
/* ============================================================
   13 · EXPLORE OTHER SERVICES — gradient bento (dark)
   ============================================================ */
#wdi-ux-page .mai{position:sticky;top:0;z-index:1;}
@media(max-width:640px){
  #wdi-ux-page .eos{border-radius:0;box-shadow:none;}
  #wdi-ux-page .mai{position:relative;top:auto;}
  #wdi-ux-page .eos-bento{grid-template-columns:1fr;}
  #wdi-ux-page .eb-ai,#wdi-ux-page .eb-sol{grid-column:span 1;}
  #wdi-ux-page .eb-go{opacity:1;transform:none;}
}
/* DEFECT 2 — drop the unsupported pin claim; sections flow normally */
#wdi-ux-page .mai{position:relative!important;top:auto!important;}
#wdi-ux-page .mai{position:relative;z-index:6;}
/* AI section: dark canvas as on the source page */
#wdi-ux-page .mai{background:#0B0C0E!important;color:#fff!important;}
#wdi-ux-page .mai-eyebrow{color:var(--rose-300)!important;}
#wdi-ux-page .mai-eyebrow i{background:var(--rose-400)!important;box-shadow:0 0 0 3px rgba(249,47,100,.2)!important;}
#wdi-ux-page .mai-h{color:#fff!important;}
#wdi-ux-page .mai-lead{color:rgba(255,255,255,.72)!important;}
#wdi-ux-page .mai-rule{background:rgba(255,255,255,.14)!important;}
#wdi-ux-page .mai-k{color:rgba(255,255,255,.5)!important;}


/* ============================================================
   08 · RELATED SERVICES — 2 × 3 grid, label left / copy right
   ============================================================ */
#wdi-ux-page .mrs{position:relative;background:#fff;padding:clamp(64px,7.4vw,112px) 0;}
#wdi-ux-page .mrs-head{display:grid;grid-template-columns:clamp(180px,20vw,300px) 1fr;
  gap:clamp(24px,4vw,72px);align-items:start;}
#wdi-ux-page .mrs-eye{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);
  border-radius:999px;padding:8px 16px;}
#wdi-ux-page .mrs-h{margin:0;font-size:clamp(34px,4.6vw,68px);font-weight:400;letter-spacing:-0.05em;
  line-height:1.03;color:var(--ink);}
#wdi-ux-page .mrs-lead{margin:22px 0 0;max-width:70ch;font-size:clamp(15px,1.2vw,17px);font-weight:300;
  line-height:1.68;color:var(--muted);}
/* grid */
#wdi-ux-page .mrs-grid{margin-top:clamp(44px,5.2vw,80px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,1.8vw,26px);}
#wdi-ux-page .mrs-cell{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(300px,30vw,384px);padding:clamp(26px,2.6vw,34px);border-radius:18px;
  background:#F4F4F5;transition:transform .5s var(--ease),background .4s ease;}
#wdi-ux-page .mrs-cell:nth-child(1),#wdi-ux-page .mrs-cell:nth-child(5){background:#0B0C0E;}
#wdi-ux-page .mrs-cell:hover{transform:translateY(-4px);}
#wdi-ux-page .mrs-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:rgba(11,12,14,.06);color:var(--ink);transition:background .3s ease,color .3s ease;}
#wdi-ux-page .mrs-ic svg{width:22px;height:22px;}
#wdi-ux-page .mrs-cell:nth-child(1) .mrs-ic,#wdi-ux-page .mrs-cell:nth-child(5) .mrs-ic{background:rgba(255,255,255,.1);color:#fff;}
#wdi-ux-page .mrs-cell:hover .mrs-ic{background:var(--rose-500);color:#fff;}
#wdi-ux-page .mrs-n{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  color:var(--faint);}
#wdi-ux-page .mrs-cell h3{margin-top:12px;font-size:clamp(19px,1.8vw,25px);font-weight:500;
  letter-spacing:-0.03em;line-height:1.16;color:var(--ink);}
#wdi-ux-page .mrs-cell p{margin-top:12px;font-size:14px;font-weight:300;line-height:1.62;color:var(--muted);
  max-width:34ch;}
#wdi-ux-page .mrs-cell:nth-child(1) h3,#wdi-ux-page .mrs-cell:nth-child(5) h3{color:#fff;}
#wdi-ux-page .mrs-cell:nth-child(1) p,#wdi-ux-page .mrs-cell:nth-child(5) p{color:rgba(255,255,255,.6);}
#wdi-ux-page .mrs-cell:nth-child(1) .mrs-n,#wdi-ux-page .mrs-cell:nth-child(5) .mrs-n{color:rgba(255,255,255,.4);}
@media(max-width:1020px){#wdi-ux-page .mrs-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  #wdi-ux-page .mrs-head{grid-template-columns:1fr;gap:20px;}
  #wdi-ux-page .mrs-grid{grid-template-columns:1fr;}
  #wdi-ux-page .mrs-cell{min-height:0;}
}
/* eyebrow stacks above the headline; copy block sits further left */
#wdi-ux-page .mrs-head{grid-template-columns:1fr!important;gap:clamp(18px,2vw,26px)!important;}
#wdi-ux-page .mrs-head-r{max-width:none;}
#wdi-ux-page .mrs-lead{max-width:64ch;}
/* eyebrow: compact pill, not full width */
#wdi-ux-page .mrs-eye{justify-self:start;width:auto;padding:7px 14px;font-size:10.5px;}
/* hover pill on each related-services card */
#wdi-ux-page .mrs-pill{position:absolute;left:clamp(26px,2.6vw,34px);bottom:clamp(26px,2.6vw,34px);
  display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 18px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:-0.01em;
  text-decoration:none;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .38s ease,transform .42s var(--ease),background .3s ease,gap .3s ease;}
#wdi-ux-page .mrs-pill svg{width:13px;height:13px;}
#wdi-ux-page .mrs-cell:hover .mrs-pill,#wdi-ux-page .mrs-cell:focus-within .mrs-pill{opacity:1;transform:none;pointer-events:auto;}
#wdi-ux-page .mrs-pill:hover{background:var(--rose-500);gap:13px;}
#wdi-ux-page .mrs-cell:nth-child(1) .mrs-pill,#wdi-ux-page .mrs-cell:nth-child(5) .mrs-pill{background:#fff;color:var(--ink);}
#wdi-ux-page .mrs-cell:nth-child(1) .mrs-pill:hover,#wdi-ux-page .mrs-cell:nth-child(5) .mrs-pill:hover{background:var(--rose-500);color:#fff;}
#wdi-ux-page .mrs-cell:hover .mrs-body{transform:translateY(-46px);}
#wdi-ux-page .mrs-body{transition:transform .42s var(--ease);}
@media(hover:none){
  #wdi-ux-page .mrs-pill{opacity:1;transform:none;pointer-events:auto;position:static;margin-top:18px;}
  #wdi-ux-page .mrs-cell:hover .mrs-body{transform:none;}
}
/* ---- shared icon tile: the notched shape from the services grid ---- */
#wdi-ux-page .mte-ic,#wdi-ux-page .mrs-ic{width:52px;height:52px;display:grid;place-items:center;border-radius:0;
  background:#fff;color:#0B0C0E;
  clip-path:polygon(0 0,100% 0,100% 68%,68% 100%,0 100%);
  transition:background .3s ease,color .3s ease,transform .4s var(--ease);}
#wdi-ux-page .mte-ic svg,#wdi-ux-page .mrs-ic svg{width:24px;height:24px;}
#wdi-ux-page .mte-cell:hover .mte-ic,#wdi-ux-page .mrs-cell:hover .mrs-ic{background:var(--rose-500);color:#fff;transform:none;}
/* dark related-service cells keep the white tile */
#wdi-ux-page .mrs-cell:nth-child(1) .mrs-ic,#wdi-ux-page .mrs-cell:nth-child(5) .mrs-ic{background:#fff;color:#0B0C0E;}
#wdi-ux-page .mrs-cell:nth-child(1):hover .mrs-ic,#wdi-ux-page .mrs-cell:nth-child(5):hover .mrs-ic{background:var(--rose-500);color:#fff;}
/* card headings unified at the 34px ceiling across all three grids */
#wdi-ux-page .mws-card h3,#wdi-ux-page .mdg-cell h3,#wdi-ux-page .mrs-cell h3,#wdi-ux-page .mte-cell h3{
  font-size:clamp(20px,2.2vw,34px)!important;}
/* card body copy: weight 400, consistent size and colour across the grids */
#wdi-ux-page .mdg-cell p,#wdi-ux-page .mrs-cell p,#wdi-ux-page .mte-cell p{font-weight:400!important;font-size:14.5px!important;}
/* grid items: subtle grey wash on hover, plus the rose circle cursor */
#wdi-ux-page .mws-card,#wdi-ux-page .mdg-cell,#wdi-ux-page .mrs-cell,#wdi-ux-page .mte-cell{transition:background .38s ease,transform .5s var(--ease);}
#wdi-ux-page .mdg-cell:hover,#wdi-ux-page .mrs-cell:hover{background:rgba(11,12,14,.04);}
#wdi-ux-page .mdg-cell:nth-child(1):hover,#wdi-ux-page .mdg-cell:nth-child(6):hover,#wdi-ux-page .mrs-cell:nth-child(1):hover,#wdi-ux-page .mrs-cell:nth-child(5):hover{background:rgba(255,255,255,.06);}
@media(hover:none){
  #wdi-ux-page .mws-card,#wdi-ux-page .mdg-cell,#wdi-ux-page .mrs-cell,#wdi-ux-page .mte-cell{cursor:auto!important;}
}
#wdi-ux-page .mrs{position:relative;z-index:6;background:#fff;}
#wdi-ux-page .mrs-grid{grid-template-columns:repeat(4,1fr);}
@media(max-width:1020px){#wdi-ux-page .mrs-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){#wdi-ux-page .mrs-grid{grid-template-columns:1fr;}}
/* capabilities: pseudo-bento with varied spans, like the support section */
#wdi-ux-page .mrs-grid{display:grid!important;grid-template-columns:repeat(6,1fr)!important;
  grid-auto-rows:minmax(clamp(220px,20vw,290px),auto)!important;
  gap:clamp(14px,1.5vw,22px)!important;grid-auto-flow:dense;}
#wdi-ux-page .mrs-cell{min-height:0!important;}
#wdi-ux-page .mrs-cell:nth-child(1){grid-column:span 3;}
#wdi-ux-page .mrs-cell:nth-child(2){grid-column:span 3;}
#wdi-ux-page .mrs-cell:nth-child(3){grid-column:span 2;}
#wdi-ux-page .mrs-cell:nth-child(4){grid-column:span 2;}
#wdi-ux-page .mrs-cell:nth-child(5){grid-column:span 2;}
#wdi-ux-page .mrs-cell:nth-child(6){grid-column:span 3;}
#wdi-ux-page .mrs-cell:nth-child(7){grid-column:span 3;}
#wdi-ux-page .mrs-cell:nth-child(1) h3,#wdi-ux-page .mrs-cell:nth-child(2) h3,#wdi-ux-page .mrs-cell:nth-child(6) h3,#wdi-ux-page .mrs-cell:nth-child(7) h3{font-size:clamp(22px,2.2vw,32px)!important;}
@media(max-width:1020px){
  #wdi-ux-page .mrs-grid{grid-template-columns:repeat(4,1fr)!important;}
  #wdi-ux-page .mrs-cell:nth-child(n){grid-column:span 2;}
}
@media(max-width:760px){
  #wdi-ux-page .mrs-grid{grid-template-columns:1fr!important;}
  #wdi-ux-page .mrs-cell:nth-child(n){grid-column:span 1;}
}
/* dark capability cells keep their ink surface and light type on hover */
#wdi-ux-page .mrs-cell:nth-child(1):hover,#wdi-ux-page .mrs-cell:nth-child(5):hover{background:#12141A!important;}
#wdi-ux-page .mrs-cell:nth-child(1):hover h3,#wdi-ux-page .mrs-cell:nth-child(5):hover h3{color:#fff!important;}
#wdi-ux-page .mrs-cell:nth-child(1):hover p,#wdi-ux-page .mrs-cell:nth-child(5):hover p{color:rgba(255,255,255,.6)!important;}
#wdi-ux-page .mrs-cell:nth-child(1):hover .mrs-n,#wdi-ux-page .mrs-cell:nth-child(5):hover .mrs-n{color:rgba(255,255,255,.4)!important;}
/* copy no longer shifts up into the icon; the pill sits below it instead */
#wdi-ux-page .mrs-cell:hover .mrs-body{transform:none!important;}
#wdi-ux-page .mrs-cell{display:flex;flex-direction:column;}
#wdi-ux-page .mrs-body{margin-top:auto;}
#wdi-ux-page .mrs-pill{position:static!important;opacity:0;transform:translateY(6px);pointer-events:none;
  margin-top:clamp(14px,1.6vw,20px);align-self:flex-start;
  transition:opacity .38s ease,transform .42s var(--ease),background .3s ease,gap .3s ease;}
#wdi-ux-page .mrs-cell:hover .mrs-pill,#wdi-ux-page .mrs-cell:focus-within .mrs-pill{opacity:1;transform:none;pointer-events:auto;}
@media(hover:none){#wdi-ux-page .mrs-pill{opacity:1;transform:none;pointer-events:auto;}}
/* capability screenshots per direct edits */
#wdi-ux-page .mrs-cell{position:relative;}
#wdi-ux-page .mrs-body{position:relative;}
#wdi-ux-page .mrs-grid{position:relative;}
#wdi-ux-page .mrs-shot{position:absolute;display:block;object-fit:cover;max-width:100%;pointer-events:none;}
#wdi-ux-page .s-c1{width:245px;height:296px;aspect-ratio:3178/3846;left:358px;top:-50px;}
#wdi-ux-page .s-c2{width:371px;height:319px;aspect-ratio:2345/1920;left:263px;top:-91px;}
@media(max-width:1100px){#wdi-ux-page .mrs-shot{display:none;}}
/* team augmentation: face collage fills the empty right side */
#wdi-ux-page .s-c6{width:213px;height:334px;aspect-ratio:719/1129;
  right:-28px;top:-82px;left:auto;object-fit:contain;opacity:.96;}
@media(max-width:1100px){#wdi-ux-page .s-c6{display:none;}}
#wdi-ux-page .s-c7{width:308px;height:377px;aspect-ratio:1424/1744;left:383px;top:6px;object-fit:cover;}
@media(max-width:1100px){#wdi-ux-page .s-c7{display:none;}}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
#wdi-ux-page .wdi-eye,
#wdi-ux-page .mcl-eye,
#wdi-ux-page .mws-eye,
#wdi-ux-page .mdg-eye,
#wdi-ux-page .msol-eyebrow,
#wdi-ux-page .mind-eyebrow,
#wdi-ux-page .pr-eyebrow,
#wdi-ux-page .mte-eyebrow,
#wdi-ux-page .mai-eyebrow,
#wdi-ux-page .ts-eyebrow,
#wdi-ux-page .aisay-eye,
#wdi-ux-page .wby-eye,
#wdi-ux-page .mrs-eye,
#wdi-ux-page .fq-eyebrow,
#wdi-ux-page .spm-eye,
#wdi-ux-page .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  line-height:1!important;margin:0 0 18px!important;
  color:#F92F64!important;}
#wdi-ux-page .wdi-eye::before,
#wdi-ux-page .mcl-eye::before,
#wdi-ux-page .mws-eye::before,
#wdi-ux-page .mdg-eye::before,
#wdi-ux-page .msol-eyebrow::before,
#wdi-ux-page .mind-eyebrow::before,
#wdi-ux-page .pr-eyebrow::before,
#wdi-ux-page .mte-eyebrow::before,
#wdi-ux-page .mai-eyebrow::before,
#wdi-ux-page .ts-eyebrow::before,
#wdi-ux-page .aisay-eye::before,
#wdi-ux-page .wby-eye::before,
#wdi-ux-page .mrs-eye::before,
#wdi-ux-page .fq-eyebrow::before,
#wdi-ux-page .spm-eye::before,
#wdi-ux-page .pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-ux-page section .wdi-eye,
#wdi-ux-page section .mcl-eye,
#wdi-ux-page section .mws-eye,
#wdi-ux-page section .mdg-eye,
#wdi-ux-page section .msol-eyebrow,
#wdi-ux-page section .mind-eyebrow,
#wdi-ux-page section .pr-eyebrow,
#wdi-ux-page section .mte-eyebrow,
#wdi-ux-page section .mai-eyebrow,
#wdi-ux-page section .ts-eyebrow,
#wdi-ux-page section .aisay-eye,
#wdi-ux-page section .wby-eye,
#wdi-ux-page section .mrs-eye,
#wdi-ux-page section .fq-eyebrow,
#wdi-ux-page section .spm-eye,
#wdi-ux-page section .avv-eyebrow,
#wdi-ux-page section .lfv-eyebrow,
#wdi-ux-page #work .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1!important;}
#wdi-ux-page section .wdi-eye::before,
#wdi-ux-page section .mcl-eye::before,
#wdi-ux-page section .mws-eye::before,
#wdi-ux-page section .mdg-eye::before,
#wdi-ux-page section .msol-eyebrow::before,
#wdi-ux-page section .mind-eyebrow::before,
#wdi-ux-page section .pr-eyebrow::before,
#wdi-ux-page section .mte-eyebrow::before,
#wdi-ux-page section .mai-eyebrow::before,
#wdi-ux-page section .ts-eyebrow::before,
#wdi-ux-page section .aisay-eye::before,
#wdi-ux-page section .wby-eye::before,
#wdi-ux-page section .mrs-eye::before,
#wdi-ux-page section .fq-eyebrow::before,
#wdi-ux-page section .spm-eye::before,
#wdi-ux-page section .avv-eyebrow::before,
#wdi-ux-page section .lfv-eyebrow::before,
#wdi-ux-page #work .pp-projects-head .eyebrow::before{
  content:""!important;width:22px!important;height:1.5px!important;flex:none!important;
  background:currentColor!important;border-radius:0!important;box-shadow:none!important;
  opacity:.85!important;animation:none!important;margin:0!important;}

/* ============================================================
   WHY BUILD WITH WDI — label left, 2 × 3 tinted cards right
   ============================================================ */
#wdi-ux-page .wby{position:relative;z-index:6;background:#fff;padding:clamp(64px,7.4vw,112px) 0;}
#wdi-ux-page .wby-in{display:grid;grid-template-columns:clamp(280px,30vw,420px) 1fr;
  gap:clamp(28px,4vw,80px);align-items:start;}
#wdi-ux-page .wby-eye{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);
  border-radius:999px;padding:8px 16px;}
#wdi-ux-page .wby-h{margin:clamp(20px,2.4vw,30px) 0 0;font-size:clamp(30px,3.6vw,54px);font-weight:500;
  letter-spacing:-0.04em;line-height:1.1;color:var(--ink);}
#wdi-ux-page .wby-cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(24px,2.6vw,34px);
  height:46px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:600;letter-spacing:-0.01em;text-decoration:none;
  transition:background .3s ease,transform .35s var(--ease),gap .3s ease;}
#wdi-ux-page .wby-cta svg{width:14px;height:14px;}
#wdi-ux-page .wby-cta:hover{background:var(--rose-500);transform:translateY(-2px);gap:14px;}
#wdi-ux-page .wby-cta:focus-visible{outline:2px solid var(--rose-500);outline-offset:4px;}
/* cards */
#wdi-ux-page .wby-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.5vw,20px);}
#wdi-ux-page .wby-cell{padding:clamp(24px,2.4vw,32px);border-radius:14px;background:#F7F7F8;
  transition:background .35s ease,transform .45s var(--ease);}
#wdi-ux-page .wby-cell:hover{background:#F2F2F4;transform:translateY(-3px);}
#wdi-ux-page .wby-ic{display:grid;place-items:center;width:34px;height:34px;color:var(--ink);
  transition:color .3s ease;}
#wdi-ux-page .wby-ic svg{width:100%;height:100%;}
#wdi-ux-page .wby-cell:hover .wby-ic{color:var(--rose-600);}
#wdi-ux-page .wby-cell h3{margin:clamp(18px,2vw,26px) 0 0;font-size:16px;font-weight:600;
  letter-spacing:-0.015em;line-height:1.3;color:var(--ink);}
#wdi-ux-page .wby-cell p{margin:10px 0 0;font-size:13.5px;font-weight:400;line-height:1.62;color:var(--muted);}
@media(max-width:1020px){#wdi-ux-page .wby-in{grid-template-columns:1fr;gap:32px;}}
@media(max-width:620px){#wdi-ux-page .wby-grid{grid-template-columns:1fr;}}
/* why-WDI: card titles up a step; left column centred against the grid */
#wdi-ux-page .wby-cell h3{font-size:21px!important;line-height:1.24!important;}
#wdi-ux-page .wby-l{align-self:center;}
/* why-WDI cards: adopt the support-section bento palette */
#wdi-ux-page .wby-cell:nth-child(1){background:linear-gradient(160deg,#F2F2F4,#E9EAEE)!important;}
#wdi-ux-page .wby-cell:nth-child(2){background:linear-gradient(160deg,#F4EEFF,#EDE4FF)!important;}
#wdi-ux-page .wby-cell:nth-child(3){background:linear-gradient(160deg,#FFEFF4,#FFE3EC)!important;}
#wdi-ux-page .wby-cell:nth-child(4){background:linear-gradient(160deg,#EAF6F1,#DFF1E9)!important;}
#wdi-ux-page .wby-cell:nth-child(5){background:linear-gradient(160deg,#EFF3FA,#E4EBF7)!important;}
#wdi-ux-page .wby-cell:nth-child(6){background:linear-gradient(160deg,#F5F3EE,#EDE9E1)!important;}
#wdi-ux-page .wby-cell{border-radius:20px!important;}
#wdi-ux-page .wby-cell:hover{filter:brightness(.985);transform:translateY(-3px);}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
#wdi-ux-page .wdi-eye,
#wdi-ux-page .mcl-eye,
#wdi-ux-page .mws-eye,
#wdi-ux-page .mdg-eye,
#wdi-ux-page .msol-eyebrow,
#wdi-ux-page .mind-eyebrow,
#wdi-ux-page .pr-eyebrow,
#wdi-ux-page .mte-eyebrow,
#wdi-ux-page .mai-eyebrow,
#wdi-ux-page .ts-eyebrow,
#wdi-ux-page .aisay-eye,
#wdi-ux-page .wby-eye,
#wdi-ux-page .mrs-eye,
#wdi-ux-page .fq-eyebrow,
#wdi-ux-page .spm-eye,
#wdi-ux-page .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;
  line-height:1!important;margin:0 0 18px!important;
  color:#F92F64!important;}
#wdi-ux-page .wdi-eye::before,
#wdi-ux-page .mcl-eye::before,
#wdi-ux-page .mws-eye::before,
#wdi-ux-page .mdg-eye::before,
#wdi-ux-page .msol-eyebrow::before,
#wdi-ux-page .mind-eyebrow::before,
#wdi-ux-page .pr-eyebrow::before,
#wdi-ux-page .mte-eyebrow::before,
#wdi-ux-page .mai-eyebrow::before,
#wdi-ux-page .ts-eyebrow::before,
#wdi-ux-page .aisay-eye::before,
#wdi-ux-page .wby-eye::before,
#wdi-ux-page .mrs-eye::before,
#wdi-ux-page .fq-eyebrow::before,
#wdi-ux-page .spm-eye::before,
#wdi-ux-page .pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-ux-page section .wdi-eye,
#wdi-ux-page section .mcl-eye,
#wdi-ux-page section .mws-eye,
#wdi-ux-page section .mdg-eye,
#wdi-ux-page section .msol-eyebrow,
#wdi-ux-page section .mind-eyebrow,
#wdi-ux-page section .pr-eyebrow,
#wdi-ux-page section .mte-eyebrow,
#wdi-ux-page section .mai-eyebrow,
#wdi-ux-page section .ts-eyebrow,
#wdi-ux-page section .aisay-eye,
#wdi-ux-page section .wby-eye,
#wdi-ux-page section .mrs-eye,
#wdi-ux-page section .fq-eyebrow,
#wdi-ux-page section .spm-eye,
#wdi-ux-page section .avv-eyebrow,
#wdi-ux-page section .lfv-eyebrow,
#wdi-ux-page #work .pp-projects-head .eyebrow{
  display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace!important;
  font-size:11px!important;font-weight:600!important;
  letter-spacing:.22em!important;text-transform:uppercase!important;line-height:1!important;}
#wdi-ux-page section .wdi-eye::before,
#wdi-ux-page section .mcl-eye::before,
#wdi-ux-page section .mws-eye::before,
#wdi-ux-page section .mdg-eye::before,
#wdi-ux-page section .msol-eyebrow::before,
#wdi-ux-page section .mind-eyebrow::before,
#wdi-ux-page section .pr-eyebrow::before,
#wdi-ux-page section .mte-eyebrow::before,
#wdi-ux-page section .mai-eyebrow::before,
#wdi-ux-page section .ts-eyebrow::before,
#wdi-ux-page section .aisay-eye::before,
#wdi-ux-page section .wby-eye::before,
#wdi-ux-page section .mrs-eye::before,
#wdi-ux-page section .fq-eyebrow::before,
#wdi-ux-page section .spm-eye::before,
#wdi-ux-page section .avv-eyebrow::before,
#wdi-ux-page section .lfv-eyebrow::before,
#wdi-ux-page #work .pp-projects-head .eyebrow::before{
  content:""!important;width:22px!important;height:1.5px!important;flex:none!important;
  background:currentColor!important;border-radius:0!important;box-shadow:none!important;
  opacity:.85!important;animation:none!important;margin:0!important;}
/* Why WDI: cards arrive two at a time, fading in from the right */
#wdi-ux-page .wby-cell.wby-rise{opacity:0;transform:translateX(46px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
#wdi-ux-page .wby-cell.wby-rise.in{opacity:1;transform:none;}
#wdi-ux-page #why-wdi .wby-cell,#wdi-ux-page #why-wdi .wby-l>*{opacity:1!important;transform:none!important;}

/* ============================================================
   WDI — Hero Banner Templates (7 variants)
   Self-contained. WDI design system tokens.
   Each hero maps to a page + a brand-inspired style.
   ============================================================ */
#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;--rose-200:#FFB3C7;
  --violet:#7A00FF;--violet-2:#A24BFF;
  --ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--faint:#9AA0A8;
  --bg:#FFFFFF;--bg-2:#FBFBFC;--page:#F5F3F0;--line:#ECEDF0;--line-2:#E3E4E8;
  --font:"Google Sans Flex","Google Sans","Product Sans",var(--font-figtree),system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --maxw:1280px;
}
#wdi-ux-page *{box-sizing:border-box;margin:0;padding:0;}
#wdi-ux-page{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
#wdi-ux-page{font-family:var(--font);background:#0d0e11;color:var(--ink);overflow-x:clip;}
#wdi-ux-page a{color:inherit;text-decoration:none;}
#wdi-ux-page img{display:block;max-width:100%;}

/* ---------- gallery shell ---------- */
#wdi-ux-page .hbv-tag{font-family:var(--font);font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62);background:#0d0e11;
  padding:22px clamp(20px,5vw,64px) 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#wdi-ux-page .hbv-tag b{color:#fff;font-weight:600;}
#wdi-ux-page .hbv-tag .pill{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;background:linear-gradient(120deg,var(--rose-500),var(--violet));padding:4px 11px;border-radius:999px;}
#wdi-ux-page .hbv-tag .page{flex:none;font-size:11px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.8);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:4px 11px;border-radius:999px;}
#wdi-ux-page .hbv-end{text-align:center;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.4);padding:40px;}

/* ---------- shared hero shell ---------- */
#wdi-ux-page .hb{position:relative;width:100%;overflow:hidden;isolation:isolate;}
#wdi-ux-page .hb-wrap{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,56px);}
#wdi-ux-page .hb-body{padding:clamp(56px,8vw,110px) 0 clamp(64px,9vw,120px);}

/* ---------- shared nav ---------- */
#wdi-ux-page .hbnav{position:relative;z-index:5;}
#wdi-ux-page .hbnav-in{max-width:var(--maxw);margin:0 auto;padding:22px clamp(22px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px;}
#wdi-ux-page .hbnav-brand{display:inline-flex;align-items:center;gap:10px;}
#wdi-ux-page .hbnav-mark{width:28px;height:28px;display:block;}
#wdi-ux-page .hbnav-name{font-size:17px;font-weight:700;letter-spacing:-0.02em;line-height:1;}
#wdi-ux-page .hbnav-links{display:flex;align-items:center;gap:28px;}
#wdi-ux-page .hbnav-links a{font-size:14.5px;font-weight:500;letter-spacing:-0.01em;opacity:.82;transition:opacity .25s;}
#wdi-ux-page .hbnav-links a:hover{opacity:1;}
#wdi-ux-page .hbnav-cta{display:flex;align-items:center;gap:11px;}
@media(max-width:860px){#wdi-ux-page .hbnav-links{display:none;}}

/* buttons */
#wdi-ux-page .hbtn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:14.5px;font-weight:600;
  letter-spacing:-0.01em;border-radius:999px;padding:12px 22px;cursor:pointer;border:1.5px solid transparent;
  white-space:nowrap;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,border-color .3s,box-shadow .3s;}
#wdi-ux-page .hbtn svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .hbtn:hover svg{transform:translateX(3px);}
#wdi-ux-page .hbtn-rose{background:var(--rose-500);color:#fff;box-shadow:0 14px 30px rgba(228,18,82,.28);}
#wdi-ux-page .hbtn-rose:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(228,18,82,.4);}
#wdi-ux-page .hbtn-ink{background:var(--ink);color:#fff;}
#wdi-ux-page .hbtn-ink:hover{background:var(--rose-500);transform:translateY(-2px);box-shadow:0 16px 34px rgba(228,18,82,.32);}
#wdi-ux-page .hbtn-lightline{background:#fff;color:var(--ink);border-color:var(--line-2);}
#wdi-ux-page .hbtn-lightline:hover{border-color:var(--ink);transform:translateY(-2px);}
#wdi-ux-page .hbtn-ghost-d{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}
#wdi-ux-page .hbtn-ghost-d:hover{border-color:var(--rose-400);color:var(--rose-300);transform:translateY(-2px);}
#wdi-ux-page .hbtn-white{background:#fff;color:var(--ink);}
#wdi-ux-page .hbtn-white:hover{background:var(--rose-500);color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px rgba(228,18,82,.34);}
#wdi-ux-page .hbtn-lg{font-size:16px;padding:16px 30px;}
#wdi-ux-page .hbtn-txt{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-0.01em;}

/* shared eyebrow */
#wdi-ux-page .hb-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;}
#wdi-ux-page .hb-eyebrow .d{width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--rose-500),var(--violet));box-shadow:0 0 12px rgba(249,47,100,.6);}
#wdi-ux-page .hb-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:-0.01em;padding:8px 15px;border-radius:999px;}

/* reveal */
#wdi-ux-page .hb-rise{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .hb.in .hb-rise{opacity:1;transform:none;}
#wdi-ux-page .hb.in .hb-rise.d1{transition-delay:.08s;}
#wdi-ux-page .hb.in .hb-rise.d2{transition-delay:.16s;}
#wdi-ux-page .hb.in .hb-rise.d3{transition-delay:.24s;}
#wdi-ux-page .hb.in .hb-rise.d4{transition-delay:.32s;}
#wdi-ux-page .hb.in .hb-rise.d5{transition-delay:.40s;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .hb-rise{opacity:1;transform:none;}}

/* ============================================================
   1 · IDEA → PRODUCT · Stripe-style (gradient swoosh + logo strip)
   ============================================================ */
#wdi-ux-page .hb1{background:#fff;color:var(--ink);}
#wdi-ux-page .hb1 .hbnav-name{color:var(--ink);}
#wdi-ux-page .hb1-swoosh{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
#wdi-ux-page .hb1-swoosh::before{content:"";position:absolute;top:-40%;right:-12%;width:70%;height:190%;
  background:conic-gradient(from 210deg at 50% 50%,#FF8A3D,#F92F64,#A24BFF,#5B8CFF,#FF8A3D);
  filter:blur(46px);opacity:.9;
  clip-path:polygon(38% 0,100% 0,100% 100%,60% 100%);
  transform:rotate(-8deg);}
#wdi-ux-page .hb1-swoosh::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,.4) 48%,transparent 62%);}
#wdi-ux-page .hb1-in{max-width:600px;padding-top:clamp(30px,4vw,54px);}
#wdi-ux-page .hb1-micro{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:-0.01em;margin-bottom:22px;}
#wdi-ux-page .hb1-micro b{font-weight:700;font-feature-settings:"tnum" 1;}
#wdi-ux-page .hb1-micro .s{color:var(--rose-600);}
#wdi-ux-page .hb1-h{font-size:clamp(34px,4.6vw,60px);font-weight:600;letter-spacing:-0.035em;line-height:1.04;}
#wdi-ux-page .hb1-h .mut{color:#5A6672;}
#wdi-ux-page .hb1-sub{margin-top:22px;font-size:clamp(16px,1.4vw,19px);font-weight:300;line-height:1.55;color:var(--ink-2);max-width:52ch;}
#wdi-ux-page .hb1-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;}
#wdi-ux-page .hb1-logos{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line);padding-top:26px;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
#wdi-ux-page .hb1-logos-track{display:flex;align-items:center;gap:60px;width:max-content;animation:hbMarquee 34s linear infinite;}
#wdi-ux-page .hb1-logos:hover .hb1-logos-track{animation-play-state:paused;}
@keyframes hbMarquee{to{transform:translateX(-50%);}}
#wdi-ux-page .hb1-logo{flex:none;font-size:21px;font-weight:700;letter-spacing:-0.02em;color:#9199A3;white-space:nowrap;transition:color .3s;}
#wdi-ux-page .hb1-logo:hover{color:var(--ink);}

/* ============================================================
   2 · MOBILE APP DEVELOPMENT · Acctual-style (centered + phone mockups)
   ============================================================ */
#wdi-ux-page .hb2{background:var(--bg-2);color:var(--ink);}
#wdi-ux-page .hb2 .hbnav-name{color:var(--ink);}
#wdi-ux-page .hb2-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
#wdi-ux-page .hb2-deco span{position:absolute;border-radius:30%;filter:blur(2px);opacity:.5;}
#wdi-ux-page .hb2 .hb-body{text-align:center;padding-bottom:0;}
#wdi-ux-page .hb2-badge{background:rgba(122,0,255,.08);color:var(--violet);border:1px solid rgba(122,0,255,.16);}
#wdi-ux-page .hb2-h{margin-top:22px;font-size:clamp(36px,5.4vw,74px);font-weight:600;letter-spacing:-0.04em;line-height:1;max-width:16ch;margin-left:auto;margin-right:auto;}
#wdi-ux-page .hb2-sub{margin:22px auto 0;font-size:clamp(16px,1.4vw,19px);font-weight:300;line-height:1.55;color:var(--ink-2);max-width:56ch;}
#wdi-ux-page .hb2-cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .hb2-chips{margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .hb2-chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;}
#wdi-ux-page .hb2-chip i{width:6px;height:6px;border-radius:50%;background:var(--rose-500);}
#wdi-ux-page .hb2-stage{position:relative;z-index:3;margin-top:clamp(40px,5vw,64px);height:clamp(230px,26vw,330px);
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,2vw,26px);}
#wdi-ux-page .hb2-phone{position:relative;width:clamp(140px,15vw,200px);aspect-ratio:9/19;border-radius:30px;
  background:#0B0C0E;padding:9px;box-shadow:0 40px 80px -30px rgba(11,12,14,.5),0 0 0 1px rgba(11,12,14,.08);
  transform:translateY(40px);}
#wdi-ux-page .hb2-phone.mid{transform:translateY(0) scale(1.06);z-index:2;}
#wdi-ux-page .hb2-phone.l{transform:translateY(56px) rotate(-6deg);}
#wdi-ux-page .hb2-phone.r{transform:translateY(56px) rotate(6deg);}
#wdi-ux-page .hb2-screen{width:100%;height:100%;border-radius:22px;overflow:hidden;position:relative;
  background:linear-gradient(170deg,#fff,#F4F5F7);}
#wdi-ux-page .hb2-screen .bar{height:26px;display:flex;align-items:center;justify-content:center;}
#wdi-ux-page .hb2-screen .bar::before{content:"";width:42px;height:6px;border-radius:6px;background:#0B0C0E;opacity:.85;}
#wdi-ux-page .hb2-screen .hd{margin:6px 12px 0;height:60px;border-radius:12px;background:linear-gradient(120deg,var(--rose-500),var(--violet));}
#wdi-ux-page .hb2-screen .rows{padding:10px 12px;display:flex;flex-direction:column;gap:7px;}
#wdi-ux-page .hb2-screen .rows i{height:12px;border-radius:5px;background:#E7E9ED;}
#wdi-ux-page .hb2-screen .rows i:nth-child(2){width:80%;}
#wdi-ux-page .hb2-screen .rows i:nth-child(3){width:64%;}
#wdi-ux-page .hb2-screen.alt .hd{background:linear-gradient(120deg,#2A6FDB,#7A00FF);}
#wdi-ux-page .hb2-screen.alt2 .hd{background:linear-gradient(120deg,#1F8A5B,#2A6FDB);}

/* ============================================================
   3 · DIGITAL PRODUCT DEVELOPMENT · Apple keynote (centered + device)
   ============================================================ */
#wdi-ux-page .hb3{background:linear-gradient(180deg,#fff,#F3F4F7);color:var(--ink);text-align:center;}
#wdi-ux-page .hb3 .hbnav-name{color:var(--ink);}
#wdi-ux-page .hb3-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:60%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(249,47,100,.12),rgba(122,0,255,.08) 45%,transparent 70%);}
#wdi-ux-page .hb3-h{font-size:clamp(38px,6vw,82px);font-weight:600;letter-spacing:-0.045em;line-height:1;max-width:15ch;margin:22px auto 0;}
#wdi-ux-page .hb3-h .grad{background:linear-gradient(110deg,var(--rose-500),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .hb3-sub{margin:24px auto 0;font-size:clamp(16px,1.5vw,20px);font-weight:300;line-height:1.5;color:var(--ink-2);max-width:52ch;}
#wdi-ux-page .hb3-cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;}
#wdi-ux-page .hb3-stage{position:relative;z-index:3;margin-top:clamp(46px,5vw,72px);}
#wdi-ux-page .hb3-browser{max-width:900px;margin:0 auto;border-radius:16px 16px 0 0;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-bottom:none;
  box-shadow:0 50px 100px -40px rgba(11,12,14,.4);}
#wdi-ux-page .hb3-browser .top{height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg-2);}
#wdi-ux-page .hb3-browser .top i{width:11px;height:11px;border-radius:50%;background:var(--line-2);}
#wdi-ux-page .hb3-browser .top i:nth-child(1){background:#FF5F57;}
#wdi-ux-page .hb3-browser .top i:nth-child(2){background:#FEBC2E;}
#wdi-ux-page .hb3-browser .top i:nth-child(3){background:#28C840;}
#wdi-ux-page .hb3-browser .top .url{margin-left:12px;height:22px;flex:1;max-width:280px;border-radius:6px;background:#fff;border:1px solid var(--line);}
#wdi-ux-page .hb3-dash{display:grid;grid-template-columns:180px 1fr;min-height:230px;}
#wdi-ux-page .hb3-dash .side{background:var(--bg-2);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:10px;}
#wdi-ux-page .hb3-dash .side i{height:11px;border-radius:5px;background:#E7E9ED;}
#wdi-ux-page .hb3-dash .side i:first-child{background:linear-gradient(90deg,var(--rose-500),var(--violet));width:70%;}
#wdi-ux-page .hb3-dash .main{padding:20px;display:flex;flex-direction:column;gap:14px;text-align:left;}
#wdi-ux-page .hb3-dash .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
#wdi-ux-page .hb3-dash .cards div{height:64px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);}
#wdi-ux-page .hb3-dash .cards div:first-child{background:linear-gradient(150deg,rgba(249,47,100,.12),rgba(122,0,255,.1));border-color:transparent;}
#wdi-ux-page .hb3-dash .chart{flex:1;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);display:flex;align-items:flex-end;gap:8px;padding:16px;}
#wdi-ux-page .hb3-dash .chart span{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--rose-400),var(--violet-2));opacity:.85;}

/* ============================================================
   4 · BUSINESS PROCESS AUTOMATION · SpaceX-style (dark cinematic glow)
   ============================================================ */
#wdi-ux-page .hb4{background:#08090B;color:#fff;text-align:center;}
#wdi-ux-page .hb4 .hbnav-name{color:#fff;}
#wdi-ux-page .hb4-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 82%);-webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 82%);}
#wdi-ux-page .hb4-glow{position:absolute;bottom:-30%;left:50%;transform:translateX(-50%);width:90%;height:80%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(249,47,100,.32),rgba(122,0,255,.2) 42%,transparent 68%);filter:blur(20px);
  animation:hb4pulse 8s ease-in-out infinite alternate;}
@keyframes hb4pulse{from{opacity:.7;}to{opacity:1;transform:translateX(-50%) scale(1.06);}}
#wdi-ux-page .hb4 .hb-eyebrow{color:var(--rose-300);}
#wdi-ux-page .hb4-h{font-size:clamp(40px,6.6vw,92px);font-weight:600;letter-spacing:-0.045em;line-height:.98;margin:24px auto 0;max-width:15ch;
  background:linear-gradient(180deg,#fff 55%,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .hb4-sub{margin:26px auto 0;font-size:clamp(16px,1.5vw,20px);font-weight:300;line-height:1.55;color:rgba(255,255,255,.66);max-width:56ch;}
#wdi-ux-page .hb4-cta{margin-top:34px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .hb4-stats{margin-top:clamp(44px,5vw,66px);display:flex;justify-content:center;gap:clamp(28px,5vw,72px);flex-wrap:wrap;}
#wdi-ux-page .hb4-stat b{display:block;font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-0.03em;color:#fff;font-feature-settings:"tnum" 1;}
#wdi-ux-page .hb4-stat span{display:block;margin-top:6px;font-size:12.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.5);text-transform:uppercase;}

/* ============================================================
   5 · AI SOLUTIONS · Google Antigravity (light, colorful, playful)
   ============================================================ */
#wdi-ux-page .hb5{background:#fff;color:var(--ink);text-align:center;}
#wdi-ux-page .hb5 .hbnav-name{color:var(--ink);}
#wdi-ux-page .hb5-blobs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
#wdi-ux-page .hb5-blobs span{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(70px);opacity:.5;}
#wdi-ux-page .hb5-blobs .a{top:-8%;left:6%;background:radial-gradient(circle,#FF8A3D,transparent 68%);}
#wdi-ux-page .hb5-blobs .b{top:-4%;right:8%;background:radial-gradient(circle,#2A6FDB,transparent 68%);}
#wdi-ux-page .hb5-blobs .c{bottom:-16%;left:36%;background:radial-gradient(circle,#F92F64,transparent 68%);}
#wdi-ux-page .hb5-pill{background:#F3F4F6;color:var(--ink-2);border:1px solid var(--line);}
#wdi-ux-page .hb5-h{margin-top:24px;font-size:clamp(38px,5.8vw,80px);font-weight:600;letter-spacing:-0.04em;line-height:1;max-width:16ch;margin-left:auto;margin-right:auto;}
#wdi-ux-page .hb5-h .g{background:linear-gradient(100deg,#FF8A3D,#F92F64,#7A00FF,#2A6FDB);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:hb5flow 8s ease infinite;}
@keyframes hb5flow{0%,100%{background-position:0 50%;}50%{background-position:100% 50%;}}
#wdi-ux-page .hb5-sub{margin:24px auto 0;font-size:clamp(16px,1.4vw,19px);font-weight:300;line-height:1.55;color:var(--ink-2);max-width:54ch;}
#wdi-ux-page .hb5-cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
#wdi-ux-page .hb5-orbit{margin-top:clamp(40px,5vw,60px);display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
#wdi-ux-page .hb5-orbit span{font-size:13px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  box-shadow:0 6px 18px rgba(11,12,14,.05);}

/* ============================================================
   6 · IDEA → PRODUCT (alt) · Shopify-style (huge type + mock cards)
   ============================================================ */
#wdi-ux-page .hb6{background:#fff;color:var(--ink);text-align:center;}
#wdi-ux-page .hb6 .hbnav-name{color:var(--ink);}
#wdi-ux-page .hb6-top{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
#wdi-ux-page .hb6-h{font-size:clamp(60px,13vw,190px);font-weight:700;letter-spacing:-0.06em;line-height:.86;color:var(--ink);margin:clamp(24px,4vw,50px) 0 0;}
#wdi-ux-page .hb6-sub{margin:22px auto 0;font-size:clamp(15px,1.4vw,18px);font-weight:400;color:var(--ink-2);max-width:44ch;}
#wdi-ux-page .hb6-cta{margin-top:26px;display:flex;justify-content:center;}
/* looping video conveyor — the WDI way (6 steps) */
#wdi-ux-page .hb6-marq{margin-top:clamp(44px,5vw,68px);position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
#wdi-ux-page .hb6-marq-track{display:flex;gap:18px;width:max-content;animation:hb6move 42s linear infinite;}
#wdi-ux-page .hb6-marq:hover .hb6-marq-track{animation-play-state:paused;}
@keyframes hb6move{from{transform:translateX(0);}to{transform:translateX(-50%);}}
#wdi-ux-page .hb6-mcard{position:relative;flex:none;width:clamp(320px,42vw,540px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0B0C0E;border:1px solid var(--line);}
#wdi-ux-page .hb6-mcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#wdi-ux-page .hb6-mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,14,.12) 30%,rgba(11,12,14,.78));}
#wdi-ux-page .hb6-mcard-lbl{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;text-align:left;color:#fff;}
#wdi-ux-page .hb6-mcard-n{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--rose-300);font-feature-settings:"tnum" 1;}
#wdi-ux-page .hb6-mcard-n::before{content:"";width:22px;height:1.5px;background:var(--rose-400);}
#wdi-ux-page .hb6-mcard-t{margin-top:9px;font-size:clamp(19px,2vw,27px);font-weight:600;letter-spacing:-0.025em;line-height:1.08;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .hb6-marq-track{animation:none;flex-wrap:wrap;justify-content:center;}}
@media(max-width:760px){#wdi-ux-page .hb6-mcard{width:78vw;}}

/* ============================================================
   7 · DIGITAL PRODUCT DEV (alt) · Orchid-style (editorial serif + ambient)
   ============================================================ */
#wdi-ux-page .hb7{background:#F7F7F8;color:var(--ink);}
#wdi-ux-page .hb7 .hbnav-name{color:var(--ink);}
#wdi-ux-page .hb7-amb{position:absolute;top:0;right:0;width:58%;height:100%;z-index:1;pointer-events:none;overflow:hidden;}
#wdi-ux-page .hb7-amb::before{content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(40% 40% at 30% 30%,#FFB37A,transparent 70%),
    radial-gradient(46% 46% at 70% 40%,#7FA8FF,transparent 70%),
    radial-gradient(50% 50% at 55% 75%,#F98FB4,transparent 72%),
    radial-gradient(40% 40% at 82% 66%,#B98CFF,transparent 70%);
  filter:blur(60px);opacity:.9;}
#wdi-ux-page .hb7-amb::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F7F7F8 8%,rgba(247,247,248,.3) 40%,transparent 66%);}
#wdi-ux-page .hb7 .hb-body{max-width:none;}
#wdi-ux-page .hb7-in{max-width:600px;}
#wdi-ux-page .hb7-h{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.2vw,86px);letter-spacing:-0.01em;line-height:1.0;color:var(--ink);}
#wdi-ux-page .hb7-h em{font-style:italic;color:var(--rose-600);}
#wdi-ux-page .hb7-sub{margin-top:24px;font-size:clamp(15px,1.3vw,18px);font-weight:300;line-height:1.6;color:var(--ink-2);max-width:44ch;}
#wdi-ux-page .hb7-cta{margin-top:30px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;}

/* responsive */
@media(max-width:760px){
  #wdi-ux-page .hb2-stage{height:auto;flex-wrap:wrap;gap:16px;}
  #wdi-ux-page .hb2-phone,#wdi-ux-page .hb2-phone.l,#wdi-ux-page .hb2-phone.r,#wdi-ux-page .hb2-phone.mid{transform:none;width:150px;}
  #wdi-ux-page .hb2-phone.l,#wdi-ux-page .hb2-phone.r{display:none;}
  #wdi-ux-page .hb3-dash{grid-template-columns:1fr;}
  #wdi-ux-page .hb3-dash .side{display:none;}
  #wdi-ux-page .hbnav-cta .hbtn-ghost-d,#wdi-ux-page .hbnav-cta .hbtn-lightline{display:none;}
}

#wdi-ux-page{
  --rose-700:#C40F46;--rose-600:#E41252;--rose-500:#F92F64;--rose-400:#FD3B6F;--rose-300:#FF6F92;
  --violet:#7A00FF;--violet-2:#A24BFF;
  --void:#000000;--bone:#ffffff;--ash:#9a9a9a;--silver:#bdbdbd;
  --font:var(--font-figtree),system-ui,-apple-system,sans-serif;
  --maxw:1280px;
}
/* ===== HERO — V3 · Lab Bench (single-weight editorial, WDI) ===== */
#wdi-ux-page .hb3{position:relative;width:100%;min-height:100svh;background:#0B0C0E;overflow:hidden;isolation:isolate;font-family:var(--font);display:flex;flex-direction:column;}
#wdi-ux-page .hb3::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(90% 80% at 20% 30%,#000,transparent 84%);-webkit-mask-image:radial-gradient(90% 80% at 20% 30%,#000,transparent 84%);}
#wdi-ux-page .hb3::after{content:"";position:absolute;bottom:-20%;right:-8%;width:60%;height:80%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(249,47,100,.12),rgba(122,0,255,.07) 44%,transparent 70%);filter:blur(20px);animation:hb3aura 16s ease-in-out infinite;}
@keyframes hb3aura{0%,100%{transform:translate(0,0) scale(1);opacity:.85;}50%{transform:translate(-4%,-5%) scale(1.12);opacity:1;}}
#wdi-ux-page .hb3-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;}
#wdi-ux-page .hb3-nav{position:relative;z-index:20;}
#wdi-ux-page .hb3-body{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--maxw,1280px);width:100%;margin:0 auto;padding:clamp(48px,7vw,90px) clamp(22px,5vw,56px) clamp(52px,7vw,90px);}
#wdi-ux-page .hb3-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px);
  opacity:0;transform:translateY(14px);animation:hb3rise .8s cubic-bezier(.2,.7,.2,1) .1s forwards;}
#wdi-ux-page .hb3-count{font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.04em;color:#9AA0A8;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;}
#wdi-ux-page .hb3-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#c9cbbe;}
#wdi-ux-page .hb3-tag i{width:7px;height:7px;border-radius:50%;background:var(--rose-500);box-shadow:0 0 12px rgba(249,47,100,.8);}
#wdi-ux-page .hb3-h{font-size:clamp(52px,10vw,132px);font-weight:400;letter-spacing:-0.045em;line-height:.96;color:#fff;
  opacity:0;transform:translateY(24px);animation:hb3rise 1s cubic-bezier(.2,.7,.2,1) .2s forwards;}
#wdi-ux-page .hb3-rule{height:1px;width:100%;background:rgba(255,255,255,.14);margin:clamp(34px,5vw,60px) 0 clamp(30px,4vw,44px);
  transform:scaleX(0);transform-origin:left;animation:hb3rule 1.1s cubic-bezier(.4,0,.15,1) .5s forwards;}
#wdi-ux-page .hb3-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
#wdi-ux-page .hb3-sub{max-width:520px;font-size:19px;font-weight:300;line-height:1.4;color:#9AA0A8;
  opacity:0;transform:translateY(16px);animation:hb3rise .9s cubic-bezier(.2,.7,.2,1) .62s forwards;}
#wdi-ux-page .hb3-cta{display:flex;align-items:center;gap:16px;flex:none;
  opacity:0;transform:translateY(16px);animation:hb3rise .9s cubic-bezier(.2,.7,.2,1) .74s forwards;}
#wdi-ux-page .hb3-ghost{font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:14px 20px;transition:border-color .25s,background .25s;}
#wdi-ux-page .hb3-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);}
#wdi-ux-page .hb3-arrow{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--rose-500);color:#fff;
  transition:transform .25s,box-shadow .25s,background .25s;}
#wdi-ux-page .hb3-arrow svg{width:20px;height:20px;transition:transform .25s;}
#wdi-ux-page .hb3-arrow:hover{transform:translateY(-2px);background:var(--rose-600);box-shadow:0 16px 34px rgba(249,47,100,.4);}
#wdi-ux-page .hb3-arrow:hover svg{transform:translateX(3px);}
#wdi-ux-page .hb3-meta{margin-top:clamp(40px,5vw,64px);font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.12em;color:#6a6b6c;
  opacity:0;animation:hb3fade 1s ease .9s forwards;}
@keyframes hb3rise{to{opacity:1;transform:none;}}
@keyframes hb3rule{to{transform:scaleX(1);}}
@keyframes hb3fade{to{opacity:1;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .hb3-top,#wdi-ux-page .hb3-h,#wdi-ux-page .hb3-sub,#wdi-ux-page .hb3-cta,#wdi-ux-page .hb3-meta{animation:none;opacity:1;transform:none;}#wdi-ux-page .hb3-rule{animation:none;transform:none;}}
/* ============================================================
   V10-V13 — reference-matched hero variants (WDI palette)
   ============================================================ */
#wdi-ux-page{--ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--line:#ECEDF0;--line-2:#E3E4E8;--cream:#F5F4EF;}
/* ============================================================
   Industries — compact vector-card rail
   ============================================================ */
#wdi-ux-page .ais-ind{position:relative;padding:clamp(56px,6vw,92px) 0;background:#fff;}
#wdi-ux-page .ais-ind-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:clamp(28px,3.2vw,42px);}
#wdi-ux-page .ais-ind-h{margin-top:16px;font-size:clamp(28px,3vw,44px);font-weight:400;letter-spacing:-0.045em;
  line-height:1.06;color:var(--ink);max-width:18ch;}
#wdi-ux-page .ais-ind-h .amp{background:linear-gradient(110deg,var(--rose-600),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .ais-ind-nav{display:flex;gap:10px;flex:none;}
#wdi-ux-page .ais-ind-arrow{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:#fff;border:1px solid var(--line-2);color:var(--ink);
  transition:background .28s,border-color .28s,color .28s,transform .28s,opacity .28s;}
#wdi-ux-page .ais-ind-arrow svg{width:17px;height:17px;}
#wdi-ux-page .ais-ind-arrow:hover{background:var(--rose-500);border-color:var(--rose-500);color:#fff;transform:translateY(-2px);}
#wdi-ux-page .ais-ind-arrow:disabled{opacity:.32;cursor:default;transform:none;background:#fff;border-color:var(--line);color:var(--ink);}
/* rail */
#wdi-ux-page .ais-ind-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 18px;
  -ms-overflow-style:none;scrollbar-width:none;}
#wdi-ux-page .ais-ind-rail::-webkit-scrollbar{display:none;}
#wdi-ux-page .ais-ind-card{flex:0 0 288px;scroll-snap-align:start;display:flex;flex-direction:column;
  padding:14px 14px 20px;border:1px solid var(--line);border-radius:20px;background:#fff;text-decoration:none;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease;}
#wdi-ux-page .ais-ind-card:hover{transform:translateY(-5px);border-color:var(--line-2);
  box-shadow:0 24px 52px -34px rgba(11,12,14,.34);}
#wdi-ux-page .ais-ind-art{display:block;border-radius:14px;overflow:hidden;aspect-ratio:14/11;}
#wdi-ux-page .ais-ind-art svg{width:100%;height:100%;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .ais-ind-card:hover .ais-ind-art svg{transform:scale(1.05);}
#wdi-ux-page .ais-ind-name{display:block;margin-top:18px;padding:0 4px;font-size:17.5px;font-weight:600;
  letter-spacing:-0.025em;color:var(--ink);}
#wdi-ux-page .ais-ind-d{display:block;margin-top:9px;padding:0 4px;font-size:14px;font-weight:300;line-height:1.55;
  color:var(--muted);}
#wdi-ux-page .ais-ind-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:16px 4px 0;
  font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:var(--rose-600);transition:gap .3s;}
#wdi-ux-page .ais-ind-more svg{width:14px;height:14px;}
#wdi-ux-page .ais-ind-card:hover .ais-ind-more{gap:12px;}
@media(max-width:760px){
  #wdi-ux-page .ais-ind-head{flex-direction:column;align-items:flex-start;gap:20px;}
  #wdi-ux-page .ais-ind-card{flex-basis:80vw;}
}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .ais-ind-card,#wdi-ux-page .ais-ind-art svg{transition:none;}}
/* open-source glyph art, centred in its tinted panel */
#wdi-ux-page .ais-ind-art{display:grid;place-items:center;}
#wdi-ux-page .ais-ind-art img{width:42%;max-width:88px;height:auto;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .ais-ind-card:hover .ais-ind-art img{transform:scale(1.08);}
/* tighten the gap between the portfolio and industries */
#wdi-ux-page .ais-ind{padding-top:clamp(28px,3vw,44px);}
/* abstract compositions fill the panel */
#wdi-ux-page .ais-ind-art{display:block;}
#wdi-ux-page .ais-ind-art svg{width:100%;height:100%;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page .ais-ind-card:hover .ais-ind-art svg{transform:scale(1.04);}
/* industry card headers: larger, better separated */
#wdi-ux-page .ais-ind-name{margin-top:22px;font-size:clamp(19px,1.7vw,23px);font-weight:600;letter-spacing:-0.03em;
  line-height:1.16;color:var(--ink);}
#wdi-ux-page .ais-ind-d{margin-top:11px;font-size:14.5px;line-height:1.6;}

#wdi-ux-page .uxh{position:relative;overflow:hidden;background:#fff;padding:clamp(56px,7vw,104px) 0 clamp(72px,8vw,120px);}
#wdi-ux-page .uxh-wash{position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(180deg,rgba(255,240,245,0) 0%,rgba(255,236,243,.75) 100%);pointer-events:none;}
#wdi-ux-page .uxh-in{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:center;}
#wdi-ux-page .uxh-copy{position:relative;z-index:2;max-width:620px;}
#wdi-ux-page .uxh-eye{margin-bottom:clamp(18px,2.2vw,26px);}
#wdi-ux-page .uxh-h{margin:0;font-size:clamp(46px,6.6vw,104px);font-weight:500;letter-spacing:-0.055em;line-height:.98;color:#0B0C0E;text-wrap:balance;}
#wdi-ux-page .uxh-g{background:linear-gradient(92deg,#F92F64 0%,#C2338B 55%,#A24BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
#wdi-ux-page .uxh-lead{margin:clamp(24px,2.6vw,34px) 0 0;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:#1A1C20;letter-spacing:-0.01em;max-width:54ch;text-wrap:pretty;}
#wdi-ux-page .uxh-p{margin:16px 0 0;font-size:15.5px;line-height:1.65;color:#5F636B;max-width:58ch;text-wrap:pretty;}
#wdi-ux-page .uxh-cta{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(28px,3vw,40px);padding:15px 24px 15px 28px;border-radius:999px;background:#F92F64;color:#fff;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 14px 34px -14px rgba(249,47,100,.6);transition:background .3s,color .3s,box-shadow .3s,transform .3s;}
#wdi-ux-page .uxh-cta svg{width:17px;height:17px;transition:transform .3s;}
#wdi-ux-page .uxh-cta:hover{background:#fff;color:#F92F64;box-shadow:inset 0 0 0 1.5px #F92F64;}
#wdi-ux-page .uxh-cta:hover svg{transform:translateX(3px);}
#wdi-ux-page .uxh-cta:focus-visible{outline:2px solid #F92F64;outline-offset:3px;}
/* collage */
#wdi-ux-page .uxh-art{position:relative;height:clamp(440px,48vw,680px);}
#wdi-ux-page .uxh-blob{position:absolute;filter:blur(2px);opacity:.9;}
#wdi-ux-page .uxh-blob.b1{left:4%;top:6%;width:76%;height:66%;border-radius:58% 42% 61% 39% / 45% 55% 45% 55%;
  background:radial-gradient(60% 60% at 40% 40%,#B998FF 0%,#C9A8FF 35%,rgba(255,170,206,.85) 70%,rgba(255,220,234,0) 100%);animation:uxhMorph 16s ease-in-out infinite alternate;}
#wdi-ux-page .uxh-blob.b2{right:-4%;top:-2%;width:40%;height:34%;border-radius:46% 54% 38% 62% / 58% 40% 60% 42%;
  background:radial-gradient(60% 60% at 50% 50%,#A24BFF 0%,rgba(162,75,255,.35) 60%,rgba(162,75,255,0) 100%);opacity:.55;animation:uxhMorph 20s ease-in-out infinite alternate-reverse;}
@keyframes uxhMorph{0%{border-radius:58% 42% 61% 39% / 45% 55% 45% 55%;transform:translate3d(0,0,0) rotate(0);}
  100%{border-radius:40% 60% 42% 58% / 58% 42% 58% 42%;transform:translate3d(2%,3%,0) rotate(8deg);}}
#wdi-ux-page .uxh-stripes{position:absolute;left:4%;bottom:-4%;width:56%;aspect-ratio:1;border-radius:50%;
  background:repeating-linear-gradient(-45deg,rgba(249,47,100,.75) 0 10px,transparent 10px 22px);
  -webkit-mask:radial-gradient(circle,#000 69%,transparent 70%);mask:radial-gradient(circle,#000 69%,transparent 70%);animation:uxhSpin 60s linear infinite;}
@keyframes uxhSpin{to{transform:rotate(360deg);}}
#wdi-ux-page .uxh-dots{position:absolute;right:0;bottom:12%;width:28%;height:30%;
  background-image:radial-gradient(#A24BFF 1.6px,transparent 1.8px);background-size:13px 13px;opacity:.55;}
#wdi-ux-page .uxh-diamond{position:absolute;z-index:2;left:46%;top:28%;width:clamp(70px,8vw,120px);aspect-ratio:1;background:rgba(249,47,100,.5);transform:rotate(45deg);mix-blend-mode:multiply;animation:uxhFloat 9s ease-in-out infinite;}
@keyframes uxhFloat{0%,100%{transform:rotate(45deg) translateY(0);}50%{transform:rotate(45deg) translateY(-12px);}}
#wdi-ux-page .uxh-arc{position:absolute;z-index:2;right:2%;top:50%;width:clamp(90px,10vw,150px);aspect-ratio:1;border-radius:50%;border:clamp(14px,1.6vw,22px) solid #F92F64;border-left-color:transparent;border-top-color:transparent;transform:rotate(-20deg);}
#wdi-ux-page .uxh-photo{position:absolute;right:8%;top:8%;width:58%;height:84%;object-fit:cover;object-position:center 22%;z-index:1;
  border-radius:48% 52% 44% 56% / 56% 48% 52% 44%;
  -webkit-mask:radial-gradient(48% 50% at 50% 50%,#000 78%,transparent 100%);mask:radial-gradient(48% 50% at 50% 50%,#000 78%,transparent 100%);
  filter:saturate(.85) contrast(1.03);animation:uxhPhoto 18s ease-in-out infinite alternate;}
#wdi-ux-page .uxh-art::after{content:"";position:absolute;right:8%;top:8%;width:58%;height:84%;z-index:2;pointer-events:none;
  border-radius:48% 52% 44% 56% / 56% 48% 52% 44%;
  background:linear-gradient(160deg,rgba(162,75,255,.16),rgba(249,47,100,.14));mix-blend-mode:soft-light;}
@keyframes uxhPhoto{0%{border-radius:48% 52% 44% 56% / 56% 48% 52% 44%;}100%{border-radius:54% 46% 52% 48% / 46% 56% 44% 54%;}}
#wdi-ux-page .uxh-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:14px;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 18px 40px -18px rgba(12,12,20,.35),inset 0 0 0 1px rgba(12,12,20,.06);
  font-size:13px;font-weight:500;color:#1A1C20;letter-spacing:-0.01em;animation:uxhFloat2 7s ease-in-out infinite;}
#wdi-ux-page .uxh-chip.c1{left:2%;top:22%;}
#wdi-ux-page .uxh-chip.c1 i{width:8px;height:8px;border-radius:50%;background:#F92F64;box-shadow:0 0 0 4px rgba(249,47,100,.18);}
#wdi-ux-page .uxh-chip.c2{left:12%;bottom:18%;animation-delay:-3.5s;}
#wdi-ux-page .uxh-chip.c2 b{font-size:18px;font-weight:600;color:#F92F64;letter-spacing:-0.03em;}
@keyframes uxhFloat2{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@media(max-width:940px){
  #wdi-ux-page .uxh-in{grid-template-columns:1fr;}
  #wdi-ux-page .uxh-art{height:clamp(380px,92vw,520px);}
}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .uxh-photo,#wdi-ux-page .uxh-blob,#wdi-ux-page .uxh-stripes,#wdi-ux-page .uxh-diamond,#wdi-ux-page .uxh-chip{animation:none!important;}}


#wdi-ux-page .wfp{background:#fff;color:#0B0C0E;font-family:var(--font-figtree),system-ui,sans-serif;padding:clamp(96px,11vw,160px) 0 clamp(88px,10vw,140px);}
#wdi-ux-page .wfp-in{max-width:1280px;margin:0 auto;padding:0 40px;box-sizing:border-box;}
#wdi-ux-page .wfp-head{display:flex;flex-direction:column;align-items:center;text-align:center;}
#wdi-ux-page .wfp-eye{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-space-grotesk),ui-monospace,monospace;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#E0204F;}
#wdi-ux-page .wfp-eye i{width:6px;height:6px;border-radius:50%;background:#F92F64;box-shadow:0 0 0 4px rgba(249,47,100,.16);}
#wdi-ux-page .wfp-h{margin:18px 0 0;font-size:clamp(34px,4.2vw,60px);font-weight:600;letter-spacing:-0.045em;line-height:1.04;text-wrap:balance;}
/* logo rail — calm, monochrome, fading at the edges */
#wdi-ux-page .wfp-logos{position:relative;margin-top:clamp(56px,6vw,84px);overflow:hidden;border-top:1px solid rgba(12,12,20,.08);border-bottom:1px solid rgba(12,12,20,.08);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
#wdi-ux-page .wfp-track{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:wfpRun 42s linear infinite;}
#wdi-ux-page .wfp-logos:hover .wfp-track{animation-play-state:paused;}
#wdi-ux-page .wfp-track li{flex:0 0 auto;display:grid;place-items:center;width:clamp(170px,15vw,220px);height:clamp(96px,9vw,124px);}
#wdi-ux-page .wfp-track img{max-width:62%;max-height:46px;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.6;mix-blend-mode:multiply;transition:filter .45s,opacity .45s,transform .45s cubic-bezier(.22,.61,.36,1);}
#wdi-ux-page .wfp-track li:hover img{filter:none;opacity:1;transform:scale(1.06);}
@keyframes wfpRun{to{transform:translate3d(-50%,0,0);}}
/* stats — large, light numerals over hairline columns */
#wdi-ux-page .wfp-stats{margin:clamp(64px,7vw,104px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
#wdi-ux-page .wfp-stat{padding:4px clamp(18px,2.2vw,34px) 0;border-left:1px solid rgba(12,12,20,.1);display:flex;flex-direction:column;}
#wdi-ux-page .wfp-stat:first-child{border-left:0;padding-left:0;}
#wdi-ux-page .wfp-stat dt{font-size:13px;font-weight:500;color:#6B6F77;letter-spacing:.01em;}
#wdi-ux-page .wfp-stat dd{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:flex-start;font-size:clamp(52px,5.4vw,84px);font-weight:300;letter-spacing:-0.055em;line-height:.95;color:#0B0C0E;}
#wdi-ux-page .wfp-stat dd sup{font-size:.42em;font-weight:400;margin:.12em 0 0 .06em;color:#F92F64;letter-spacing:0;}
#wdi-ux-page .wfp-stat dd.wfp-w{font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-0.03em;line-height:1.18;max-width:14ch;margin-top:22px;}
#wdi-ux-page .wfp-u{flex-basis:100%;margin-top:12px;font-size:15px;font-weight:500;color:#3A3D44;}
@media(max-width:900px){#wdi-ux-page .wfp-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px;}
  #wdi-ux-page .wfp-stat:nth-child(3){border-left:0;padding-left:0;}}
@media(max-width:560px){#wdi-ux-page .wfp-in{padding:0 20px;}#wdi-ux-page .wfp-stats{grid-template-columns:1fr;}#wdi-ux-page .wfp-stat{border-left:0;padding-left:0;border-top:1px solid rgba(12,12,20,.1);padding-top:22px;}#wdi-ux-page .wfp-stat:first-child{border-top:0;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .wfp-track{animation:none;}}
/* ===== bold + luxurious pass, with trust seal backdrop ===== */
#wdi-ux-page .wfp{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#FFFFFF 0%,#FBF8FA 100%);}
#wdi-ux-page .wfp-in{position:relative;z-index:1;}
#wdi-ux-page .wfp-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
#wdi-ux-page .wfp-seal{position:absolute;left:50%;top:clamp(20px,4vw,60px);width:min(880px,92vw);transform:translateX(-50%);opacity:.9;}
#wdi-ux-page .wfp-seal .sl-o{stroke:rgba(249,47,100,.16);stroke-width:1.2;transform-origin:300px 300px;animation:wfpSeal 120s linear infinite;}
#wdi-ux-page .wfp-seal .sl-r1{stroke:rgba(12,12,20,.07);stroke-width:1;}
#wdi-ux-page .wfp-seal .sl-r2{stroke:rgba(249,47,100,.22);stroke-width:1.4;transform-origin:300px 300px;animation:wfpSeal 90s linear infinite reverse;}
#wdi-ux-page .wfp-seal .sl-r3{stroke:rgba(12,12,20,.05);stroke-width:1;}
#wdi-ux-page .wfp-seal .sl-ck{stroke:rgba(249,47,100,.10);stroke-width:14;}
@keyframes wfpSeal{to{transform:rotate(360deg);}}
#wdi-ux-page .wfp-ring{position:absolute;left:50%;top:calc(clamp(20px,4vw,60px) + min(440px,46vw));border-radius:50%;border:1px solid rgba(12,12,20,.05);transform:translate(-50%,-50%);}
#wdi-ux-page .wfp-ring.r1{width:min(1200px,125vw);height:min(1200px,125vw);}
#wdi-ux-page .wfp-ring.r2{width:min(1560px,160vw);height:min(1560px,160vw);border-color:rgba(249,47,100,.06);}
#wdi-ux-page .wfp-ring.r3{width:min(1920px,200vw);height:min(1920px,200vw);}
#wdi-ux-page .wfp-glow{position:absolute;left:50%;top:calc(clamp(20px,4vw,60px) + min(440px,46vw));width:min(760px,80vw);height:min(760px,80vw);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(249,47,100,.10),transparent 70%);border-radius:50%;}
#wdi-ux-page .wfp-h{font-size:clamp(40px,5.2vw,78px);font-weight:700;letter-spacing:-0.055em;line-height:1;max-width:14ch;}
#wdi-ux-page .wfp-h::after{content:"";display:block;width:56px;height:3px;margin:28px auto 0;border-radius:3px;background:linear-gradient(90deg,#F92F64,#FF8FB0);}
#wdi-ux-page .wfp-logos{margin-top:clamp(64px,7vw,96px);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid rgba(12,12,20,.1);border-bottom:1px solid rgba(12,12,20,.1);}
#wdi-ux-page .wfp-track img{opacity:.72;}
#wdi-ux-page .wfp-stats{margin-top:clamp(72px,8vw,112px);}
#wdi-ux-page .wfp-stat{border-left-color:rgba(12,12,20,.12);}
#wdi-ux-page .wfp-stat dt{font-family:var(--font-space-grotesk),ui-monospace,monospace;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8A8E96;}
#wdi-ux-page .wfp-stat dd{font-size:clamp(60px,6.4vw,104px);font-weight:700;letter-spacing:-0.06em;
  background:linear-gradient(180deg,#0B0C0E 30%,#4A4D55 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#wdi-ux-page .wfp-stat dd sup{-webkit-text-fill-color:#F92F64;color:#F92F64;font-weight:600;}
#wdi-ux-page .wfp-stat dd.wfp-w{font-size:clamp(24px,2.3vw,34px);font-weight:700;letter-spacing:-0.035em;}
#wdi-ux-page .wfp-u{font-size:16px;font-weight:600;color:#0B0C0E;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .wfp-seal .sl-o,#wdi-ux-page .wfp-seal .sl-r2{animation:none;}}
/* ===== refined pass — compact, quiet, one subtle trust mark ===== */
#wdi-ux-page .wfp{padding:clamp(64px,7vw,96px) 0!important;background:#fff!important;}
#wdi-ux-page .wfp-mark{position:absolute;right:max(24px,calc(50% - 640px));top:50%;width:clamp(260px,26vw,380px);transform:translateY(-50%);}
#wdi-ux-page .wfp-mark circle{stroke:rgba(12,12,20,.07);stroke-width:1;}
#wdi-ux-page .wfp-mark circle + circle{stroke:rgba(249,47,100,.16);}
#wdi-ux-page .wfp-mark path{stroke:rgba(249,47,100,.35);stroke-width:1.6;}
#wdi-ux-page .wfp-head{align-items:flex-start!important;text-align:left!important;}
#wdi-ux-page .wfp-h{font-size:clamp(28px,2.8vw,40px)!important;font-weight:600!important;letter-spacing:-0.04em!important;line-height:1.1!important;max-width:none!important;margin-top:14px!important;}
#wdi-ux-page .wfp-h::after{display:none!important;}
#wdi-ux-page .wfp-logos{margin-top:clamp(36px,4vw,52px)!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-top:1px solid rgba(12,12,20,.08)!important;border-bottom:1px solid rgba(12,12,20,.08)!important;}
#wdi-ux-page .wfp-track li{height:clamp(76px,7vw,96px)!important;}
#wdi-ux-page .wfp-track img{max-height:38px!important;opacity:.6!important;}
#wdi-ux-page .wfp-stats{margin-top:clamp(40px,4.4vw,60px)!important;}
#wdi-ux-page .wfp-stat dt{font-family:var(--font-figtree),system-ui,sans-serif!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:#6B6F77!important;}
#wdi-ux-page .wfp-stat dd{margin-top:12px!important;font-size:clamp(40px,3.8vw,56px)!important;font-weight:500!important;letter-spacing:-0.05em!important;
  background:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important;-webkit-text-fill-color:#0B0C0E!important;color:#0B0C0E!important;}
#wdi-ux-page .wfp-stat dd sup{-webkit-text-fill-color:#F92F64!important;font-weight:500!important;}
#wdi-ux-page .wfp-stat dd.wfp-w{font-size:clamp(19px,1.6vw,23px)!important;font-weight:500!important;letter-spacing:-0.02em!important;margin-top:14px!important;}
#wdi-ux-page .wfp-u{margin-top:8px!important;font-size:14px!important;font-weight:500!important;line-height:1.35!important;letter-spacing:0!important;color:#3A3D44!important;-webkit-text-fill-color:#3A3D44!important;}
@media(max-width:900px){#wdi-ux-page .wfp-mark{opacity:.6;right:-60px;}}


#wdi-ux-page #ux-services{--ink:#0B0C0E;--ink-2:#41454C;--faint:#9AA0A8;--line:#ECEDF0;--rose-600:#E41252;
  position:relative;background:#FBFBFC;padding:clamp(96px,10vw,150px) 0;}
#wdi-ux-page #ux-services .uxs-head{max-width:880px;}
#wdi-ux-page #ux-services .wdi-eye{margin-bottom:clamp(18px,2.2vw,26px);}
#wdi-ux-page #ux-services .uxs-h{margin:0;font-size:clamp(34px,4.4vw,62px);font-weight:500;letter-spacing:-0.045em;line-height:1.04;color:var(--ink);}
#wdi-ux-page #ux-services .uxs-lead{margin:clamp(18px,2vw,26px) 0 0;font-size:clamp(15.5px,1.2vw,18px);line-height:1.62;font-weight:300;color:var(--ink-2);max-width:76ch;text-wrap:pretty;}
#wdi-ux-page #ux-services .sv2-body{margin-top:clamp(44px,5.2vw,72px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;}
#wdi-ux-page #ux-services .sv2-names{display:flex;flex-direction:column;}
#wdi-ux-page #ux-services .sv2-name{display:flex;align-items:baseline;gap:20px;width:100%;text-align:left;font:inherit;background:none;border:none;cursor:pointer;
  padding:clamp(14px,1.5vw,20px) 0;border-top:1px solid var(--line);
  font-size:clamp(22px,2.6vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.08;color:#C9CCD2;
  transition:color .35s ease,padding-left .45s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #ux-services .sv2-names .sv2-name:last-child{border-bottom:1px solid var(--line);}
#wdi-ux-page #ux-services .sv2-name .nm-idx{flex:none;width:34px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--faint);font-feature-settings:"tnum" 1;transition:color .35s ease;}
#wdi-ux-page #ux-services .sv2-name:hover{color:var(--ink-2);padding-left:10px;}
#wdi-ux-page #ux-services .sv2-name.active{color:var(--ink);padding-left:10px;}
#wdi-ux-page #ux-services .sv2-name.active .nm-idx{color:#F92F64;}
#wdi-ux-page #ux-services .sv2-name:focus-visible{outline:2px solid #F92F64;outline-offset:4px;border-radius:6px;}
#wdi-ux-page #ux-services .sv2-side{position:sticky;top:110px;}
#wdi-ux-page #ux-services .sv2-side-img{position:relative;aspect-ratio:5/4;border-radius:20px;overflow:hidden;background:#0A0B0E;}
#wdi-ux-page #ux-services .sv2-side-img img{width:100%;height:100%;object-fit:cover;display:block;}
#wdi-ux-page #ux-services .sv2-side-img::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(162,75,255,.14),rgba(249,47,100,.12) 60%,rgba(11,12,14,.28));pointer-events:none;}
#wdi-ux-page #ux-services .sv2-side-tag{position:absolute;z-index:1;left:16px;bottom:16px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(11,12,14,.5);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#wdi-ux-page #ux-services .uxs-side-t{margin:24px 0 0;font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-0.025em;color:var(--ink);}
#wdi-ux-page #ux-services .sv2-side-desc{margin:10px 0 0;font-size:15.5px;line-height:1.62;font-weight:300;color:var(--ink-2);}
#wdi-ux-page #ux-services .uxs-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:13px 22px;border-radius:999px;background:#F92F64;color:#fff;font-size:14.5px;font-weight:600;text-decoration:none;transition:background .3s,color .3s,box-shadow .3s;}
#wdi-ux-page #ux-services .uxs-cta svg{width:16px;height:16px;transition:transform .3s;}
#wdi-ux-page #ux-services .uxs-cta:hover{background:#fff;color:#F92F64;box-shadow:inset 0 0 0 1.5px #F92F64;}
#wdi-ux-page #ux-services .uxs-cta:hover svg{transform:translateX(3px);}
#wdi-ux-page #ux-services .uxs-swap > *{animation:uxsSwap .5s cubic-bezier(.2,.7,.2,1) both;}
#wdi-ux-page #ux-services .uxs-swap > :nth-child(2){animation-delay:.05s;}#wdi-ux-page #ux-services .uxs-swap > :nth-child(3){animation-delay:.1s;}
@keyframes uxsSwap{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
#wdi-ux-page #ux-services{overflow:hidden;isolation:isolate;}
#wdi-ux-page .uxs-pin{position:relative;background:#FBFBFC;}
#wdi-ux-page .uxs-pin.is-pinned > #ux-services{position:sticky;}
#wdi-ux-page .uxs-pin.is-pinned .sv2-side{position:relative!important;top:auto!important;}
@media(max-width:900px),(prefers-reduced-motion:reduce){#wdi-ux-page .uxs-pin > #ux-services{position:relative;}}
#wdi-ux-page #ux-services .sv2-name{transition:color .45s ease,padding-left .55s cubic-bezier(.2,.7,.2,1)!important;}
#wdi-ux-page #ux-services .sv2-side-img img{transition:opacity .4s ease;}
#wdi-ux-page #ux-services > .wrap{position:relative;z-index:1;}
#wdi-ux-page #ux-services .uxs-live{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);}
#wdi-ux-page #ux-services .uxs-live svg{width:100%;height:100%;}
#wdi-ux-page #ux-services .ux-board rect{stroke:rgba(12,12,20,.12);stroke-width:1.1;fill:rgba(255,255,255,.55);}
#wdi-ux-page #ux-services .ux-board rect:first-child{stroke:rgba(12,12,20,.16);}
#wdi-ux-page #ux-services .ux-board.b1{animation:uxDrift 14s ease-in-out infinite;}
#wdi-ux-page #ux-services .ux-board.b2{animation:uxDrift 16s ease-in-out infinite reverse;}
@keyframes uxDrift{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
#wdi-ux-page #ux-services .ux-sel{stroke:#F92F64;stroke-width:1.2;stroke-dasharray:6 5;fill:none;opacity:0;animation:uxSel 14s ease-in-out infinite;}
@keyframes uxSel{0%,52%{opacity:0;}60%,88%{opacity:.75;}96%,100%{opacity:0;}}
#wdi-ux-page #ux-services .ux-path{stroke:rgba(12,12,20,.1);stroke-width:1.2;stroke-dasharray:3 6;}
#wdi-ux-page #ux-services .ux-flow{stroke:url(#uxsLg);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:120 900;stroke-dashoffset:1020;animation:uxFlow 9s linear infinite;}
@keyframes uxFlow{to{stroke-dashoffset:0;}}
#wdi-ux-page #ux-services .ux-nodes circle{fill:#fff;stroke:rgba(249,47,100,.5);stroke-width:1.3;}
#wdi-ux-page #ux-services .ux-nodes .end{fill:#F92F64;stroke:none;}
#wdi-ux-page #ux-services .ux-ring{fill:none;stroke:#F92F64;stroke-width:1.1;transform-box:fill-box;transform-origin:center;animation:uxRing 4.2s ease-out infinite;}
@keyframes uxRing{0%{transform:scale(1);opacity:.55;}100%{transform:scale(4.2);opacity:0;}}
#wdi-ux-page #ux-services .ux-pen line{stroke:rgba(162,75,255,.35);stroke-width:1;}
#wdi-ux-page #ux-services .ux-pen .ux-curve{stroke:rgba(12,12,20,.18);stroke-width:1.4;stroke-dasharray:420;stroke-dashoffset:420;animation:uxDraw 10s ease-in-out infinite;}
@keyframes uxDraw{0%{stroke-dashoffset:420;}40%,80%{stroke-dashoffset:0;}100%{stroke-dashoffset:-420;}}
#wdi-ux-page #ux-services .ux-pen rect{fill:#fff;stroke:#A24BFF;stroke-width:1.1;}
#wdi-ux-page #ux-services .ux-pen circle{fill:#A24BFF;opacity:.6;}
#wdi-ux-page #ux-services .ux-cursor path{fill:#0B0C0E;stroke:#fff;stroke-width:1.2;}
#wdi-ux-page #ux-services .ux-click{fill:none;stroke:#F92F64;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;animation:uxClick 14s ease-out infinite;}
@keyframes uxClick{0%,55%{opacity:0;transform:scale(.6);}58%{opacity:.8;transform:scale(1);}70%{opacity:0;transform:scale(3.4);}100%{opacity:0;}}
@media(max-width:900px){#wdi-ux-page #ux-services .uxs-live{opacity:.45;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #ux-services .uxs-live *{animation:none!important;}#wdi-ux-page #ux-services .ux-cursor{display:none;}}
@media(max-width:900px){#wdi-ux-page #ux-services .sv2-body{grid-template-columns:1fr;}#wdi-ux-page #ux-services .sv2-side{position:relative;top:auto;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #ux-services .uxs-swap > *{animation:none;}}


#wdi-ux-page #ux-improve .mrs-cell{display:flex!important;flex-direction:column!important;align-items:flex-start!important;}
#wdi-ux-page #ux-improve .mrs-ic{position:static!important;margin:0 0 clamp(28px,2.6vw,40px)!important;flex:none;}
#wdi-ux-page #ux-improve .mrs-body,#wdi-ux-page #ux-improve .mrs-cell > .mrs-body{position:static!important;display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0!important;padding-top:0!important;}
#wdi-ux-page #ux-improve .mrs-n{display:block!important;position:static!important;margin:0 0 14px!important;padding:0!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace;font-size:11px!important;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;line-height:1;white-space:nowrap;}
#wdi-ux-page #ux-improve .mrs-n br{display:none;}
#wdi-ux-page #ux-improve .mrs-body h3{margin:0 0 12px!important;}
#wdi-ux-page #ux-improve .mrs-body p{margin:0!important;}
#wdi-ux-page #ux-improve .mrs-pill{margin-top:auto;}

#wdi-ux-page #ux-improve{position:relative;isolation:isolate;overflow:hidden;}
#wdi-ux-page #ux-improve > .wrap{position:relative;z-index:1;}
#wdi-ux-page #ux-improve .uxi-live{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask:radial-gradient(80% 70% at 76% 22%,#000 26%,transparent 72%);mask:radial-gradient(80% 70% at 76% 22%,#000 26%,transparent 72%);}
#wdi-ux-page #ux-improve .uxi-live svg{width:100%;height:100%;}
#wdi-ux-page #ux-improve .ui-aura{transform-box:fill-box;transform-origin:center;animation:uiAura 18s ease-in-out infinite alternate;}
@keyframes uiAura{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-50px,26px,0) scale(1.08);}}
/* engraved twisted ribbon — two fine-line layers flowing in opposite directions */
#wdi-ux-page #ux-improve .ui-rib path{stroke:url(#uxiRib);stroke-width:.65;vector-effect:non-scaling-stroke;}
#wdi-ux-page #ux-improve .ui-rib.a{opacity:.32;animation:uiRibA 46s linear infinite;}
#wdi-ux-page #ux-improve .ui-rib.b{opacity:.16;animation:uiRibB 64s linear infinite;}
@keyframes uiRibA{from{transform:translateX(0);}to{transform:translateX(-720px);}}
@keyframes uiRibB{from{transform:translateX(-720px);}to{transform:translateX(0);}}
/* quiet orbit with a travelling satellite */
#wdi-ux-page #ux-improve .ui-orbit circle{stroke:rgba(12,12,20,.09);stroke-width:.8;}
#wdi-ux-page #ux-improve .ui-orbit .d{stroke:rgba(249,47,100,.28);stroke-dasharray:1 6;}
#wdi-ux-page #ux-improve .ui-orbit .ui-sat{fill:#F92F64;stroke:none;transform-origin:0 0;animation:uiSat 22s linear infinite;}
@keyframes uiSat{to{transform:rotate(360deg);}}
/* coloured cells — WDI palette */
#wdi-ux-page #ux-improve .mrs-cell{border:0!important;position:relative;overflow:hidden;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(1){background:linear-gradient(150deg,#0B0C0E 0%,#1B0C14 60%,#3A0D22 100%)!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(2){background:linear-gradient(140deg,#F92F64 0%,#D62A6F 55%,#A24BFF 120%)!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(3){background:#FFF0F4!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(4){background:#F3ECFF!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(5){background:#0B0C0E!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(6){background:linear-gradient(150deg,#FFF4F7 0%,#F6EDFF 100%)!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(7){background:linear-gradient(150deg,#2A0B1C 0%,#0B0C0E 75%)!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(1)::after,#wdi-ux-page #ux-improve .mrs-cell:nth-child(7)::after{content:"";position:absolute;right:-20%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(249,47,100,.28),transparent 65%);pointer-events:none;}
/* light-on-dark cells: 1, 2, 5, 7 */
#wdi-ux-page #ux-improve .mrs-cell:nth-child(2) h3,#wdi-ux-page #ux-improve .mrs-cell:nth-child(7) h3{color:#fff!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(2) p{color:rgba(255,255,255,.86)!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(7) p{color:rgba(255,255,255,.66)!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(2) .mrs-n,#wdi-ux-page #ux-improve .mrs-cell:nth-child(7) .mrs-n{color:rgba(255,255,255,.6)!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(2) .mrs-ic,#wdi-ux-page #ux-improve .mrs-cell:nth-child(7) .mrs-ic{background:rgba(255,255,255,.16)!important;color:#fff!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(1) .mrs-ic,#wdi-ux-page #ux-improve .mrs-cell:nth-child(5) .mrs-ic{background:rgba(255,255,255,.1)!important;color:#FF7BA3!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(2) .mrs-pill,#wdi-ux-page #ux-improve .mrs-cell:nth-child(7) .mrs-pill{background:#fff!important;color:#0B0C0E!important;}
/* tinted cells: rose / violet icon tiles */
#wdi-ux-page #ux-improve .mrs-cell:nth-child(3) .mrs-ic{background:#fff!important;color:#F92F64!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(4) .mrs-ic{background:#fff!important;color:#A24BFF!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(6) .mrs-ic{background:#fff!important;color:#D62A6F!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(3) .mrs-n{color:#E0204F!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(4) .mrs-n{color:#8A3BE0!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(n):hover{transform:translateY(-3px);}
#wdi-ux-page #ux-improve .mrs-cell{transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;}
#wdi-ux-page #ux-improve .mrs-cell:hover{box-shadow:0 26px 56px -30px rgba(12,12,20,.45);}
/* visual consistency: every title is two lines; descriptions share a three-line block */
#wdi-ux-page #ux-improve .mrs-cell h3{min-height:2.1em;line-height:1.05!important;}
#wdi-ux-page #ux-improve .mrs-cell p{min-height:calc(1.55em * 3);line-height:1.55!important;}
#wdi-ux-page #ux-improve .mrs-cell:nth-child(3) h3,#wdi-ux-page #ux-improve .mrs-cell:nth-child(4) h3,#wdi-ux-page #ux-improve .mrs-cell:nth-child(5) h3{font-size:clamp(19px,1.6vw,23px)!important;}
@media(max-width:900px){
  #wdi-ux-page #ux-improve .uxi-live{opacity:.45;}
  #wdi-ux-page #ux-improve .mrs-cell p{min-height:0;}
  /* Keep Explore button clear of the copy — margin-top:auto collapses when cards are short */
  #wdi-ux-page #ux-improve .mrs-body p{margin:0 0 22px!important;}
  #wdi-ux-page #ux-improve .mrs-pill{
    margin-top:0!important;flex:none;align-self:flex-start!important;
    width:auto!important;max-width:max-content;display:inline-flex!important;
  }
}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #ux-improve .uxi-live *{animation:none!important;}}


#wdi-ux-page{--ink:#0B0C0E;--ink-2:#3A3D44;--muted:#5F636B;--faint:#9A9EA6;--line-2:rgba(12,12,20,.14);
  --rose-300:#FF8FB0;--rose-500:#F92F64;--rose-600:#E0204F;--mono:var(--font-space-grotesk),ui-monospace,monospace;--ease:cubic-bezier(.22,.61,.36,1);}
#wdi-ux-page #ux-decisions .mdg-head,#wdi-ux-page #ux-decisions .mdg-grid{max-width:1280px;margin-left:auto;margin-right:auto;
  padding-left:clamp(20px,5vw,64px);padding-right:clamp(20px,5vw,64px);box-sizing:border-box;}
#wdi-ux-page #ux-decisions .mdg-grid{margin-top:clamp(48px,5.6vw,88px);gap:clamp(14px,1.6vw,24px);}
#wdi-ux-page #ux-decisions .mdg-cell{border-radius:22px;overflow:hidden;opacity:1!important;transform:none!important;}
#wdi-ux-page #ux-decisions{overflow-x:clip;}
#wdi-ux-page #ux-decisions{isolation:isolate;}
/* solutions — vertical lanes in the same visual language as the decisions backdrop */
#wdi-ux-page #solutions{position:relative;isolation:isolate;}
#wdi-ux-page #solutions .msol-live{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible;clip-path:inset(0);
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);mask:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);}
#wdi-ux-page #solutions .msol-live svg{position:sticky;top:0;display:block;width:100%;height:100vh;}
#wdi-ux-page #solutions > .wrap{position:relative;z-index:1;}
#wdi-ux-page #solutions .sl-base path{stroke:rgba(12,12,20,.07);stroke-width:1.2;}
#wdi-ux-page #solutions .sl-flow use{stroke:url(#msolLg);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:140 1900;stroke-dashoffset:2040;animation:slFlow 12s linear infinite;}
#wdi-ux-page #solutions .sl-flow use.d2{animation-duration:15s;animation-delay:-6s;}
#wdi-ux-page #solutions .sl-flow use.d3{animation-duration:17s;animation-delay:-9s;}
#wdi-ux-page #solutions .sl-flow use.d4{animation-duration:14s;animation-delay:-3s;}
#wdi-ux-page #solutions .sl-flow use{stroke-dasharray:130 1100;stroke-dashoffset:1230;}
@keyframes slFlow{to{stroke-dashoffset:0;}}
#wdi-ux-page #solutions .sl-base path{stroke:rgba(12,12,20,.09)!important;}
#wdi-ux-page #solutions .sl-nodes circle{fill:#fff;stroke:rgba(249,47,100,.45);stroke-width:1.3;animation:mlPulse 4.8s ease-in-out infinite;}
#wdi-ux-page #solutions .sl-nodes circle:nth-child(2n){animation-delay:-1.6s;}
#wdi-ux-page #solutions .sl-nodes circle:nth-child(3n){animation-delay:-3.2s;}
#wdi-ux-page #solutions .sl-nodes .hub{fill:#F92F64;stroke:none;}
#wdi-ux-page #solutions .sl-ring{fill:none;stroke:#F92F64;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:mlRing 3.6s ease-out infinite;animation-delay:-1.8s;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #solutions .sl-flow{display:none;}#wdi-ux-page #solutions .sl-nodes circle,#wdi-ux-page #solutions .sl-ring{animation:none;}}
#wdi-ux-page #ux-decisions .mdg-live{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);}
#wdi-ux-page #ux-decisions .mdg-live svg{width:100%;height:100%;}
#wdi-ux-page #ux-decisions .mdg-head,#wdi-ux-page #ux-decisions .mdg-grid{position:relative;z-index:1;}
#wdi-ux-page #ux-decisions .ml-base path{stroke:rgba(12,12,20,.07);stroke-width:1.2;}
#wdi-ux-page #ux-decisions .ml-flow use{stroke:url(#mdgLg);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:120 1600;stroke-dashoffset:1720;animation:mlFlow 9s linear infinite;}
#wdi-ux-page #ux-decisions .ml-flow use.d2{animation-duration:11s;animation-delay:-4s;}
#wdi-ux-page #ux-decisions .ml-flow use.d3{animation-duration:13s;animation-delay:-7s;}
@keyframes mlFlow{to{stroke-dashoffset:0;}}
#wdi-ux-page #ux-decisions .ml-nodes circle{fill:#fff;stroke:rgba(249,47,100,.45);stroke-width:1.3;animation:mlPulse 4.8s ease-in-out infinite;}
#wdi-ux-page #ux-decisions .ml-nodes circle:nth-child(2n){animation-delay:-1.6s;}
#wdi-ux-page #ux-decisions .ml-nodes circle:nth-child(3n){animation-delay:-3.2s;}
#wdi-ux-page #ux-decisions .ml-nodes .hub{fill:#F92F64;stroke:none;}
@keyframes mlPulse{0%,100%{opacity:.45;}50%{opacity:1;}}
#wdi-ux-page #ux-decisions .ml-ring{fill:none;stroke:#F92F64;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:mlRing 3.6s ease-out infinite;}
@keyframes mlRing{0%{transform:scale(1);opacity:.6;}100%{transform:scale(6);opacity:0;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #ux-decisions .ml-flow use,#wdi-ux-page #ux-decisions .ml-nodes circle,#wdi-ux-page #ux-decisions .ml-ring{animation:none;}#wdi-ux-page #ux-decisions .ml-flow{display:none;}}
#wdi-ux-page #ux-decisions .mdg-cell h3{font-size:clamp(20px,1.9vw,28px)!important;line-height:1.14!important;}
#wdi-ux-page #ux-decisions .mdg-tl{display:block;white-space:nowrap;}
/* WDI-toned card surfaces */
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(1)::before{background:radial-gradient(90% 80% at 0% 100%,rgba(249,47,100,.32),transparent 60%),linear-gradient(155deg,#0B0C0E,#1A0F16 60%,#2A0C1C)!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(2)::before{background:linear-gradient(155deg,#FFF3F7,#FCE1EB)!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(3)::before{background:radial-gradient(80% 70% at 100% 0%,rgba(255,143,176,.55),transparent 60%),linear-gradient(155deg,#F92F64,#C8174A)!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(4)::before{background:linear-gradient(155deg,#F7F1FF,#ECE2FF)!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(5)::before{background:linear-gradient(155deg,#FFF3F7 0%,#F3E8FF 100%)!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(6)::before{background:radial-gradient(90% 80% at 100% 0%,rgba(162,75,255,.30),transparent 60%),linear-gradient(155deg,#0B0C0E,#170F1E 60%,#2A0C1C)!important;}
/* rose card reads white */
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(3) h3{color:#fff!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(3) p{color:rgba(255,255,255,.88)!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(3) .mdg-n{color:rgba(255,255,255,.8)!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(3) .mdg-pill{background:#fff!important;color:#C8174A!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(3)::after{background:radial-gradient(70% 70% at 20% 100%,rgba(255,255,255,.2),transparent 62%)!important;}
/* tinted cards: rose numerals */
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(2) .mdg-n,#wdi-ux-page #ux-decisions .mdg-cell:nth-child(4) .mdg-n,#wdi-ux-page #ux-decisions .mdg-cell:nth-child(5) .mdg-n{color:#E0204F!important;}
#wdi-ux-page #ux-decisions .mdg-cell:nth-child(1) .mdg-n,#wdi-ux-page #ux-decisions .mdg-cell:nth-child(6) .mdg-n{color:#FF8FB0!important;}


/* breathing room below the decisions grid, matching the space above it */
#wdi-ux-page #ux-decisions{padding-bottom:clamp(96px,10vw,150px)!important;}
#wdi-ux-page #ux-decisions .mdg-grid{margin-bottom:0!important;row-gap:clamp(14px,1.6vw,24px)!important;column-gap:clamp(14px,1.6vw,24px)!important;}


#wdi-ux-page #ux-solutions{--ink:#0B0C0E;--ink-2:#41454C;--faint:#9AA0A8;--line:#ECEDF0;--rose-600:#E41252;--rose-400:#FD3B6F;
  background:#fff;padding:clamp(96px,10vw,150px) 0;}
#wdi-ux-page #ux-solutions .uc-head{max-width:880px;}
#wdi-ux-page #ux-solutions .wdi-eye{margin-bottom:clamp(18px,2.2vw,26px);}
#wdi-ux-page #ux-solutions .uc-h{margin:0;font-size:clamp(34px,4.4vw,62px);font-weight:500;letter-spacing:-0.045em;line-height:1.04;color:var(--ink);}
#wdi-ux-page #ux-solutions .uc-sub{margin:clamp(18px,2vw,26px) 0 0;font-size:clamp(15.5px,1.2vw,18px);line-height:1.62;font-weight:300;color:var(--ink-2);max-width:72ch;text-wrap:pretty;}
#wdi-ux-page #ux-solutions .uca-rows{margin-top:clamp(52px,6vw,88px);display:flex;flex-direction:column;gap:clamp(28px,3.4vw,52px);}
#wdi-ux-page #ux-solutions .uca-row{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,4.4vw,72px);align-items:center;
  opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #ux-solutions .uca-row.in{opacity:1;transform:none;}
#wdi-ux-page #ux-solutions .uca-row.flip .uca-visual{order:2;}
#wdi-ux-page #ux-solutions .uca-visual{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/10.5;background:#0a0b0e;border:1px solid #15171d;box-shadow:0 30px 70px rgba(11,12,14,.14);}
#wdi-ux-page #ux-solutions .uca-mesh{position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.7,.2,1);}
#wdi-ux-page #ux-solutions .uca-row:hover .uca-mesh{transform:scale(1.06);}
#wdi-ux-page #ux-solutions .uca-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:46px 46px;
  -webkit-mask-image:radial-gradient(85% 85% at 70% 30%,#000,transparent 84%);mask-image:radial-gradient(85% 85% at 70% 30%,#000,transparent 84%);}
#wdi-ux-page #ux-solutions .uca-bignum{position:absolute;left:34px;top:22px;font-size:clamp(76px,8vw,120px);font-weight:300;line-height:1;letter-spacing:-0.05em;color:rgba(255,255,255,.14);font-feature-settings:"tnum" 1;}
#wdi-ux-page #ux-solutions .uca-vico{position:absolute;right:30px;top:32px;width:56px;height:56px;color:#fff;opacity:.95;filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));}
#wdi-ux-page #ux-solutions .uca-vico svg{width:100%;height:100%;}
#wdi-ux-page #ux-solutions .uca-vtags{position:absolute;left:30px;right:30px;bottom:28px;display:flex;flex-wrap:wrap;gap:8px;}
#wdi-ux-page #ux-solutions .uca-vtag-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#wdi-ux-page #ux-solutions .uca-vtag-pill .d{width:6px;height:6px;border-radius:50%;background:var(--rose-400);box-shadow:0 0 8px var(--rose-400);}
#wdi-ux-page #ux-solutions .uca-vtag-pill.ghost{color:rgba(255,255,255,.78);}
#wdi-ux-page #ux-solutions .uca-content{min-width:0;}
#wdi-ux-page #ux-solutions .uca-kicker{font-family:var(--font-space-grotesk),ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#F92F64;}
#wdi-ux-page #ux-solutions .uca-title{margin:14px 0 0;font-size:clamp(24px,2.5vw,36px);font-weight:500;letter-spacing:-0.035em;line-height:1.06;color:var(--ink);text-wrap:balance;}
#wdi-ux-page #ux-solutions .uca-scenario{margin:16px 0 0;font-size:16.5px;font-weight:300;line-height:1.6;color:var(--ink-2);max-width:48ch;}
#wdi-ux-page #ux-solutions .uc-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;transition:gap .25s ease,color .25s ease;}
#wdi-ux-page #ux-solutions .uc-link svg{width:15px;height:15px;color:#F92F64;}
#wdi-ux-page #ux-solutions .uc-link:hover{color:#F92F64;gap:12px;}
@media(max-width:900px){
  #wdi-ux-page #ux-solutions .uca-row{grid-template-columns:1fr;opacity:1;transform:none;}
  #wdi-ux-page #ux-solutions .uca-row.flip .uca-visual{order:0;}
}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #ux-solutions .uca-row{opacity:1;transform:none;transition:none;}}


#wdi-ux-page #wf-industries > .wrap{min-width:0;width:100%;max-width:1280px;margin-inline:auto;box-sizing:border-box;}
#wdi-ux-page #wf-industries{min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(96px,11vh,150px)!important;padding-bottom:clamp(96px,11vh,150px)!important;}


/* industries — pinned horizontal scroll through the card rail */
#wdi-ux-page .wfi-pin{position:relative;z-index:3;}
#wdi-ux-page .wfi-pin > #wf-industries{z-index:3;box-shadow:0 -24px 60px rgba(12,12,20,.08);}
#wdi-ux-page .wfi-pin > #wf-industries{position:sticky;top:0;height:100vh;min-height:0!important;overflow:hidden;}
#wdi-ux-page .wfi-pin > #wf-industries{padding-top:clamp(28px,7vh,96px)!important;padding-bottom:clamp(24px,5vh,80px)!important;}
/* pinned state: every block scales with viewport height so the wrap always fits 100vh */
#wdi-ux-page .wfi-pin.on #wf-industries .wdi-eye{margin-bottom:clamp(10px,1.8vh,26px)!important;}
#wdi-ux-page .wfi-pin.on #wf-industries .ais-ind-h{font-size:clamp(30px,min(5vw,7.4vh),76px)!important;}
#wdi-ux-page .wfi-pin.on #wf-industries .ais-ind-lead{margin-top:clamp(8px,1.4vh,18px)!important;}
#wdi-ux-page .wfi-pin.on #wf-industries .ais-ind-art{height:clamp(96px,19vh,210px)!important;}
#wdi-ux-page .wfi-pin.on #wf-industries .ais-ind-rail{margin-top:clamp(16px,3vh,44px)!important;}
#wdi-ux-page .wfi-pin.on #indRail{overflow:hidden!important;scroll-snap-type:none!important;}
#wdi-ux-page .wfi-pin.on #indRail > *{will-change:transform,opacity;transform-origin:50% 60%;}
#wdi-ux-page .wfi-pin.on #indRail .ais-ind-art{will-change:transform;}
#wdi-ux-page .wfi-pin.on #indRail .ais-ind-art > svg{transition:none;}
@media(max-width:900px),(max-height:620px),(prefers-reduced-motion:reduce){
  #wdi-ux-page .wfi-pin{height:auto!important;}
  #wdi-ux-page .wfi-pin > #wf-industries{position:relative;height:auto;}
}

#wdi-ux-page .ais-ind-lead{margin:18px 0 0;max-width:62ch;font-size:clamp(15px,1.15vw,17px);line-height:1.68;color:#5F636B;}

#wdi-ux-page #wf-industries{position:relative;isolation:isolate;overflow:hidden;}
#wdi-ux-page #wf-industries .wfi-live{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 45%,transparent 80%);mask:linear-gradient(180deg,#000 0%,#000 45%,transparent 80%);}
#wdi-ux-page #wf-industries .wfi-live svg{width:100%;height:100%;}
#wdi-ux-page #wf-industries > .wrap{position:relative;z-index:1;}
/* guilloché rosette — engraved, fine-line, slow */
#wdi-ux-page #wf-industries{background:#fff;}
#wdi-ux-page #wf-industries .wfi-live{-webkit-mask:radial-gradient(70% 90% at 84% 26%,#000 30%,transparent 72%)!important;mask:radial-gradient(70% 90% at 84% 26%,#000 30%,transparent 72%)!important;}
#wdi-ux-page #wf-industries .wg-rose ellipse{stroke:url(#wiG);stroke-width:.6;opacity:.28;}
#wdi-ux-page #wf-industries .wg-rose2 ellipse{stroke:#F92F64;stroke-width:.5;opacity:.18;}
#wdi-ux-page #wf-industries .wg-rings circle{stroke:rgba(12,12,20,.08);stroke-width:.7;}
#wdi-ux-page #wf-industries .wg-rings circle:nth-child(3){stroke:rgba(249,47,100,.22);stroke-dasharray:1 6;}
#wdi-ux-page #wf-industries .wg-core{fill:#F92F64;opacity:.7;}
#wdi-ux-page #wf-industries .wg-rose{animation:wgSpin 140s linear infinite;}
#wdi-ux-page #wf-industries .wg-rose2{animation:wgSpin 90s linear infinite reverse;transform:scale(.62);}
#wdi-ux-page #wf-industries .wg-rings{animation:wgBreathe 9s ease-in-out infinite;}
@keyframes wgSpin{to{transform:rotate(360deg);}}
#wdi-ux-page #wf-industries .wg-rose2{animation-name:wgSpin2;}
@keyframes wgSpin2{from{transform:scale(.62) rotate(0);}to{transform:scale(.62) rotate(-360deg);}}
@keyframes wgBreathe{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.03);opacity:.7;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #wf-industries .wg-rose,#wdi-ux-page #wf-industries .wg-rose2,#wdi-ux-page #wf-industries .wg-rings{animation:none;}}
#wdi-ux-page #wf-industries::after{content:none!important;}
/* headers match the sections above */
#wdi-ux-page #wf-industries .wdi-eye{margin-bottom:clamp(18px,2.2vw,26px);}
#wdi-ux-page #wf-industries .ais-ind-h{font-size:clamp(34px,5vw,76px)!important;max-width:22ch;letter-spacing:-0.05em!important;line-height:1.03!important;font-weight:400!important;}
#wdi-ux-page #wf-industries [class*="ais-ind-eye"]{font-family:var(--font-space-grotesk),ui-monospace,monospace!important;font-size:11px!important;
  font-weight:600!important;letter-spacing:.22em!important;color:#F92F64!important;}
#wdi-ux-page #wf-industries .ais-ind-lead{font-size:14.5px!important;line-height:1.68!important;}



#wdi-ux-page #ai-process .wdi-eye{margin-bottom:clamp(18px,2.2vw,26px);}
#wdi-ux-page #ai-process .pr-h{font-size:clamp(34px,5vw,76px)!important;letter-spacing:-0.05em!important;line-height:1.04!important;font-weight:400!important;}
#wdi-ux-page #ai-process .prx-l{display:block;}
#wdi-ux-page #ai-process .pra-left{min-width:0;}


#wdi-ux-page #ai-process .pr-eyebrow,#wdi-ux-page #ai-process .prx-p,#wdi-ux-page #ai-process .pr-header-cta,#wdi-ux-page #ai-process .prx-l,#wdi-ux-page #ai-process .prx-l i{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important;}


#wdi-ux-page .mad-strip{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
#wdi-ux-page .mad-track{display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;animation:madMarq 34s linear infinite;}
#wdi-ux-page .mad-strip:hover .mad-track{animation-play-state:paused;}
#wdi-ux-page .mad-logo{display:flex;align-items:center;height:56px;flex:0 0 auto;}
#wdi-ux-page .mad-logo img{max-height:44px;max-width:150px;width:auto;object-fit:contain;transition:transform .45s cubic-bezier(.22,.61,.36,1);}
#wdi-ux-page .mad-logo:hover img{transform:scale(1.12);}
@keyframes madMarq{to{transform:translateX(-50%);}}
#wdi-ux-page .mad-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(12,12,20,.1);}
#wdi-ux-page .mad-stat{display:flex;flex-direction:column;gap:10px;padding:28px 24px 4px 0;}
#wdi-ux-page .mad-stat + .mad-stat{padding-left:24px;border-left:1px solid rgba(12,12,20,.1);}
#wdi-ux-page .mad-k{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6b6f78;}
#wdi-ux-page .mad-v{font-size:clamp(19px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.25;color:#0b0c0e;text-wrap:balance;}
@media(max-width:820px){#wdi-ux-page .mad-stats{grid-template-columns:repeat(2,minmax(0,1fr));}#wdi-ux-page .mad-stat:nth-child(3){padding-left:0;border-left:0;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .mad-track{animation:none;}}

/* stats — premium redesign */
#wdi-ux-page .mad-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(48px,6vw,80px);border-top:0;position:relative;}
#wdi-ux-page .mad-stats::before{content:"";position:absolute;left:var(--gut,0);right:var(--gut,0);top:0;height:1px;background:linear-gradient(90deg,#F92F64,rgba(249,47,100,.25) 40%,rgba(12,12,20,.1));transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.22,.61,.36,1) .15s;}
#wdi-ux-page .mad-eco.in .mad-stats::before{transform:scaleX(1);}
#wdi-ux-page .mad-stat{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:30px 28px 6px 0!important;border-left:0!important;
  opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.22,.61,.36,1) calc(var(--d) + .35s),transform .9s cubic-bezier(.22,.61,.36,1) calc(var(--d) + .35s);}
#wdi-ux-page .mad-stat + .mad-stat{padding-left:28px!important;box-shadow:inset 1px 0 0 rgba(12,12,20,.08);}
#wdi-ux-page .mad-eco.in .mad-stat{opacity:1;transform:none;}
#wdi-ux-page .mad-top{display:flex;align-items:center;gap:10px;margin-bottom:22px;}
#wdi-ux-page .mad-top em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.08em;color:#F92F64;font-variant-numeric:tabular-nums;}
#wdi-ux-page .mad-k{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6b6f78;}
#wdi-ux-page .mad-n{font-size:clamp(40px,4.4vw,64px);font-weight:500;letter-spacing:-.045em;line-height:1;color:#0b0c0e;font-variant-numeric:tabular-nums;}
#wdi-ux-page .mad-u{margin-top:10px;font-size:15px;font-weight:500;color:#4a4d55;letter-spacing:-.01em;}
#wdi-ux-page .mad-w{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.14;color:#0b0c0e;text-wrap:balance;max-width:14ch;}
@media(max-width:820px){#wdi-ux-page .mad-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px;}#wdi-ux-page .mad-stat:nth-child(3){padding-left:0!important;box-shadow:none;}}

/* default section transition — every section after the hero rises into place */
#wdi-ux-page .sec-tx{opacity:0;transform:translateY(64px);transform-origin:50% 0;
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.3s cubic-bezier(.16,1,.3,1);will-change:transform,opacity;}
#wdi-ux-page .sec-tx.in{opacity:1;transform:none;}
#wdi-ux-page .sec-tx .lp-eco-head{opacity:0;transform:translateY(22px);transition:opacity .9s ease .2s,transform 1s cubic-bezier(.16,1,.3,1) .2s;}
#wdi-ux-page .sec-tx.in .lp-eco-head{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .sec-tx,#wdi-ux-page .sec-tx .lp-eco-head,#wdi-ux-page .mad-stat{opacity:1!important;transform:none!important;transition:none!important;}#wdi-ux-page .mad-stats::before{transform:scaleX(1);}}

/* ===== page-level alignment: every section shares one 1200px content column ===== */
#wdi-ux-page{--ink:#0B0C0E;--ink-2:#3A3D44;--muted:#5F636B;--faint:#9A9EA6;--line-2:rgba(12,12,20,.14);
  --rose-300:#FF8FB0;--rose-500:#F92F64;--rose-600:#E0204F;--mono:var(--font-space-grotesk),ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);--measure:1280px;--gutter:40px;}
/* ONE container for every section, hero included */
#wdi-ux-page .hb1-body,#wdi-ux-page .hb1-crumb,#wdi-ux-page .hb1-meta,#wdi-ux-page .wrap,#wdi-ux-page #proof .mad-stats,#wdi-ux-page #decisions .mdg-head,#wdi-ux-page #decisions .mdg-grid{
  max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;
  padding-left:clamp(20px,5vw,64px)!important;padding-right:clamp(20px,5vw,64px)!important;box-sizing:border-box!important;}
#wdi-ux-page #decisions .mdg-grid{margin-top:clamp(48px,5.6vw,88px);gap:clamp(14px,1.6vw,24px);}
#wdi-ux-page #decisions .mdg-cell{border-radius:22px;overflow:hidden;}
#wdi-ux-page #decisions{overflow-x:clip;}
/* no entrance animations: every section and its contents show in place */
#wdi-ux-page .sec-tx,#wdi-ux-page .sec-tx .lp-eco-head,#wdi-ux-page .mad-stat,#wdi-ux-page .spm-grid .spm-card,#wdi-ux-page .spm-head .spm-eye,#wdi-ux-page .spm-head .spm-h,#wdi-ux-page .spm-head .spm-lead,#wdi-ux-page .mdg-grid .mdg-cell,#wdi-ux-page .mai-c,#wdi-ux-page .mte-cell,#wdi-ux-page .mws-card,#wdi-ux-page .mrs-cell,#wdi-ux-page .msol-panel{opacity:1!important;transform:none!important;transition-property:background,color,box-shadow,border-color!important;}
#wdi-ux-page .mad-stats::before{transform:scaleX(1)!important;transition:none!important;}
#wdi-ux-page section.t02-sec,#wdi-ux-page .t02-sec,#wdi-ux-page .t02-sec .t02-stagger,#wdi-ux-page .t02-stagger > *{opacity:1!important;transform:none!important;transition:none!important;}
/* remaining in-section reveals: process intro, testimonials, awards rows, portfolio card text */
#wdi-ux-page #process .pr-eyebrow,#wdi-ux-page #process .prx-p,#wdi-ux-page #process .pr-header-cta,#wdi-ux-page #process .prx-l,#wdi-ux-page #process .prx-l i,#wdi-ux-page #ai-process .pr-eyebrow,#wdi-ux-page #ai-process .prx-p,#wdi-ux-page #ai-process .pr-header-cta,#wdi-ux-page #ai-process .prx-l,#wdi-ux-page #ai-process .prx-l i,#wdi-ux-page #awA .reveal,#wdi-ux-page #awA .ava-head,#wdi-ux-page #awA .ava-row,#wdi-ux-page #work .pp-logo,#wdi-ux-page #work .pp-eyebrow,#wdi-ux-page #work .pp-name,#wdi-ux-page #work .pp-tagline,#wdi-ux-page #work .pp-desc,#wdi-ux-page #work .pp-row,#wdi-ux-page #work .pp-rev,#wdi-ux-page #work .pp-keystat-label,#wdi-ux-page #work .pp-keystat-h,#wdi-ux-page #work .pp-mcaps,#wdi-ux-page #ai-experiences .mai-media-ic,#wdi-ux-page #related .fc-card{
  opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important;}
/* capabilities: product shots contained inside each card, anchored bottom-right */
#wdi-ux-page #capabilities .mrs-cell{position:relative;overflow:hidden!important;}
#wdi-ux-page #capabilities .mrs-body{position:static!important;}
#wdi-ux-page #capabilities .mrs-shot{position:absolute!important;right:clamp(16px,1.6vw,24px)!important;bottom:0!important;
  top:auto!important;left:auto!important;width:auto!important;height:auto!important;
  max-width:42%!important;max-height:78%!important;object-fit:contain!important;object-position:bottom right!important;
  pointer-events:none;z-index:0;}
#wdi-ux-page #capabilities .mrs-body > :not(.mrs-shot),#wdi-ux-page #capabilities .mrs-ic,#wdi-ux-page #capabilities .mrs-pill{position:relative;z-index:1;}
#wdi-ux-page #capabilities .mrs-cell:has(.mrs-shot) .mrs-body p,#wdi-ux-page #capabilities .mrs-cell:has(.mrs-shot) .mrs-body h3{max-width:52%;}
/* explicit per-shot sizing so each image fills its card's right half cleanly */
#wdi-ux-page #capabilities .mrs-shot.s-c1,#wdi-ux-page #capabilities .mrs-shot.s-c6,#wdi-ux-page #capabilities .mrs-shot.s-c7{width:34%!important;max-height:86%!important;}
#wdi-ux-page #capabilities .mrs-shot.s-c2{width:44%!important;max-width:44%!important;max-height:72%!important;bottom:50%!important;transform:translateY(50%)!important;right:clamp(14px,1.4vw,22px)!important;}
@media(max-width:760px){
  #wdi-ux-page #capabilities .mrs-shot{display:none!important;}
  #wdi-ux-page #capabilities .mrs-body p,#wdi-ux-page #capabilities .mrs-body h3{max-width:none!important;}
  /* Keep Explore button clear of the copy — margin-top:auto collapses when cards are short */
  #wdi-ux-page #capabilities .mrs-body p,#wdi-ux-page #extend .mrs-body p{margin:0 0 22px!important;}
  #wdi-ux-page #capabilities .mrs-pill,#wdi-ux-page #extend .mrs-pill{
    margin-top:0!important;flex:none;align-self:flex-start!important;
    width:auto!important;max-width:max-content;display:inline-flex!important;
  }
}
/* final CTA */
#wdi-ux-page .mad-final{background:#0B0C0E!important;color:#fff;padding:clamp(96px,10vw,160px) 0!important;position:relative;overflow:hidden;}
#wdi-ux-page .mad-final .pp-cta{margin:0!important;width:auto!important;left:auto!important;transform:none!important;min-height:0!important;
  background:transparent!important;border-radius:0!important;padding:0!important;color:#fff!important;
  position:static!important;overflow:visible!important;}
#wdi-ux-page .mad-final .pp-cta{display:block!important;text-align:left!important;place-items:unset!important;}
#wdi-ux-page .mad-final .pp-cta-in{padding:0!important;margin:0!important;max-width:none!important;width:100%!important;position:relative;z-index:1;text-align:left!important;}
#wdi-ux-page .mad-final .pp-cta-h{max-width:18ch;margin:0!important;text-align:left!important;text-wrap:pretty;}
#wdi-ux-page .mad-final .pp-cta-p{max-width:60ch;margin:24px 0 0!important;text-align:left!important;}
#wdi-ux-page .mad-final .pp-cta-actions{justify-content:flex-start!important;}
#wdi-ux-page .mad-final .hxf-eye,#wdi-ux-page .mad-final .hxf-micro{text-align:left!important;}
#wdi-ux-page .mad-final .pp-cta-aura,#wdi-ux-page .mad-final .pp-cta-dots{position:absolute!important;inset:0!important;}
#wdi-ux-page .mad-final .pp-cta-h,#wdi-ux-page .mad-final .pp-cta-p,#wdi-ux-page .mad-final .pp-cta-actions{opacity:1!important;transform:none!important;transition:none!important;}
#wdi-ux-page .mad-final .pp-cta-h{color:#fff!important;}
#wdi-ux-page .mad-final .pp-cta-h em{color:#FF7BA3!important;-webkit-text-fill-color:#FF7BA3!important;background:none!important;font-style:normal;}
#wdi-ux-page .mad-final .pp-cta-p{color:rgba(255,255,255,.72)!important;}
#wdi-ux-page .mad-final .pp-cta-btn{background:#F92F64!important;color:#fff!important;border-color:#F92F64!important;}
#wdi-ux-page .mad-final .pp-cta-btn:hover{background:#fff!important;color:#F92F64!important;border-color:#fff!important;}
#wdi-ux-page footer.ft2{background:#0B0C0E!important;color:#fff!important;}
#wdi-ux-page .mad-final .pp-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;}
#wdi-ux-page .mad-final .pp-cta-link{color:rgba(255,255,255,.82);font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.35);transition:color .25s,text-decoration-color .25s;}
#wdi-ux-page .mad-final .pp-cta-link:hover{color:#FF7BA3;text-decoration-color:#FF7BA3;}
/* testimonials: a single moving row */
#wdi-ux-page #ts-b .tsm-head,#wdi-ux-page #ts-b .tsm-head *,#wdi-ux-page #ts-b .ts-eyebrow,#wdi-ux-page #ts-b .ts-h,#wdi-ux-page #ts-b .ts-sub{opacity:1!important;transform:none!important;filter:none!important;visibility:visible!important;transition:none!important;}
#wdi-ux-page #ts-b .ts-h{color:#0B0C0E!important;}#wdi-ux-page #ts-b .ts-sub{color:#5F636B!important;}#wdi-ux-page #ts-b .ts-eyebrow{color:#F92F64!important;}
#wdi-ux-page #ts-b .tsm-rows > *:nth-child(n+2){display:none!important;}
#wdi-ux-page #ts-b .tsm-rows{opacity:1!important;}
/* dark CTA band */
#wdi-ux-page section.mad-cta-dark{background:#0B0C0E!important;color:#fff!important;}
#wdi-ux-page .mad-cta-dark .t02-cta-band-track{color:rgba(255,255,255,.06)!important;-webkit-text-stroke:0!important;}
#wdi-ux-page .mad-cta-dark .tag{color:#FF7BA3!important;}
#wdi-ux-page .mad-cta-dark h2{color:#fff!important;}
#wdi-ux-page .mad-cta-dark h2 em{color:#FF7BA3!important;-webkit-text-fill-color:#FF7BA3!important;background:none!important;}
#wdi-ux-page .mad-cta-dark p{color:rgba(255,255,255,.72)!important;}
#wdi-ux-page .mad-cta-dark .lp-btn-primary{background:#F92F64!important;color:#fff!important;border-color:#F92F64!important;}
#wdi-ux-page .mad-cta-dark .lp-btn-primary:hover{background:#fff!important;color:#F92F64!important;border-color:#fff!important;}
#wdi-ux-page,#wdi-ux-page{overflow-x:clip;}
#wdi-ux-page #industries .mic-track{
  padding-left:max(clamp(20px,5vw,64px), calc((100vw - 1280px) / 2 + clamp(20px,5vw,64px)))!important;
  padding-right:max(clamp(20px,5vw,64px), calc((100vw - 1280px) / 2 + clamp(20px,5vw,64px)))!important;}
#wdi-ux-page #decisions{padding-bottom:clamp(96px,11vw,160px)!important;}



#wdi-ux-page #ai-process .pr-eyebrow,#wdi-ux-page #ai-process .prx-p,#wdi-ux-page #ai-process .pr-header-cta,#wdi-ux-page #ai-process .prx-l,#wdi-ux-page #ai-process .prx-l i{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important;}


/* process holds once its last card is in view; the next section slides up over it */
#wdi-ux-page #ai-process.pra-hold{position:sticky;z-index:1;}
#wdi-ux-page #ai-process.pra-hold ~ section,#wdi-ux-page #ai-process.pra-hold ~ div,#wdi-ux-page #ai-process.pra-hold ~ footer{position:relative;z-index:3;}
#wdi-ux-page #ux-practices{background:#fff;box-shadow:0 -30px 60px -30px rgba(12,12,20,.28);border-radius:28px 28px 0 0;}
@media(max-width:900px),(prefers-reduced-motion:reduce){#wdi-ux-page #ai-process.pra-hold{position:relative;top:auto!important;}#wdi-ux-page #ux-practices{border-radius:0;box-shadow:none;}}


/* 4 × 2 rhythm for eight practices; quiet draw-in and hover detail */
#wdi-ux-page #ux-practices .mte-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
#wdi-ux-page #ux-practices .mte-cell h3{min-height:2.2em;}
#wdi-ux-page #ux-practices .mte-rule{transform-origin:left center;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.61,.36,1);}
#wdi-ux-page #ux-practices.in .mte-rule{transform:none;}
#wdi-ux-page #ux-practices .mte-cell{position:relative;opacity:0;transform:translateY(16px);transition:opacity .7s ease var(--d,0ms),transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0ms),background .35s ease;}
#wdi-ux-page #ux-practices.in .mte-cell{opacity:1;transform:none;}
#wdi-ux-page #ux-practices .mte-cell::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,#F92F64,#A24BFF);transition:width .55s cubic-bezier(.22,.61,.36,1);}
#wdi-ux-page #ux-practices .mte-cell:hover::before{width:100%;}
#wdi-ux-page #ux-practices .mte-cell:hover{background:linear-gradient(180deg,rgba(249,47,100,.04),transparent 70%);}
#wdi-ux-page #ux-practices .mte-ic svg{transition:transform .45s cubic-bezier(.22,.61,.36,1);}
#wdi-ux-page #ux-practices .mte-cell:hover .mte-ic svg{transform:translateY(-2px) scale(1.06);}
@media(max-width:1080px){#wdi-ux-page #ux-practices .mte-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:620px){#wdi-ux-page #ux-practices .mte-grid{grid-template-columns:1fr!important;}#wdi-ux-page #ux-practices .mte-cell h3{min-height:0;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #ux-practices .mte-cell,#wdi-ux-page #ux-practices .mte-rule{opacity:1;transform:none;transition:none;}}


#wdi-ux-page #ux-ai .lp-eyebrow{display:none;}
#wdi-ux-page #ux-ai .lp-head::before{content:"AI opportunities";display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(18px,2.2vw,26px);
  font-family:var(--font-space-grotesk),ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#F92F64;
  padding-left:32px;background:linear-gradient(#F92F64,#F92F64) 0 50%/22px 1.5px no-repeat;}
#wdi-ux-page #hero ~ section#ux-ai .lp-h,#wdi-ux-page section#ux-ai .lp-h.lp-h{font-size:clamp(34px,5vw,76px)!important;letter-spacing:-0.05em!important;line-height:1.04!important;font-weight:400!important;}

/* wireframe globe backdrop — slowly rotating meridians, two quiet orbits */
#wdi-ux-page #ux-ai{position:relative;overflow:hidden;isolation:isolate;}
#wdi-ux-page #ux-ai > .wrap{position:relative;z-index:1;}
#wdi-ux-page #ux-ai .uxa-live{position:absolute;z-index:0;pointer-events:none;right:-10%;top:-16%;width:min(72vw,880px);aspect-ratio:1;
  -webkit-mask:radial-gradient(circle,#000 42%,transparent 70%);mask:radial-gradient(circle,#000 42%,transparent 70%);}
#wdi-ux-page #ux-ai .uxa-live svg{width:100%;height:100%;overflow:visible;}
#wdi-ux-page #ux-ai .uxa-mer .m{stroke:url(#uxaG);stroke-width:.7;opacity:.32;transform-box:fill-box;transform-origin:center;animation:uxaMer 16s linear infinite;}
@keyframes uxaMer{0%{transform:scaleX(1);opacity:.1;}25%{transform:scaleX(0);opacity:.42;}50%{transform:scaleX(1);opacity:.1;}75%{transform:scaleX(0);opacity:.42;}100%{transform:scaleX(1);opacity:.1;}}
#wdi-ux-page #ux-ai .uxa-lat .l{stroke:rgba(12,12,20,.08);stroke-width:.7;}
#wdi-ux-page #ux-ai .uxa-rim{stroke:rgba(249,47,100,.28);stroke-width:.9;}
#wdi-ux-page #ux-ai .uxa-path{stroke:rgba(12,12,20,.08);stroke-width:.8;}
#wdi-ux-page #ux-ai .uxa-path.d{stroke:rgba(162,75,255,.22);stroke-dasharray:1 7;}
#wdi-ux-page #ux-ai .uxa-orb{transform-origin:0 0;}
#wdi-ux-page #ux-ai .uxa-orb.o1{animation:uxaSpin 38s linear infinite;}
#wdi-ux-page #ux-ai .uxa-orb.o2{animation:uxaSpin 54s linear infinite reverse;}
@keyframes uxaSpin{to{transform:rotate(360deg);}}
#wdi-ux-page #ux-ai .uxa-node{fill:#F92F64;filter:drop-shadow(0 0 6px rgba(249,47,100,.55));}
#wdi-ux-page #ux-ai .uxa-node.v{fill:#A24BFF;filter:drop-shadow(0 0 6px rgba(162,75,255,.55));}
#wdi-ux-page #ux-ai .uxa-core{fill:#F92F64;opacity:.7;}
#wdi-ux-page #ux-ai .uxa-glow{animation:uxaGlow 10s ease-in-out infinite;transform-origin:0 0;}
@keyframes uxaGlow{0%,100%{transform:scale(.94);opacity:.8;}50%{transform:scale(1.04);opacity:1;}}
@media(max-width:900px){#wdi-ux-page #ux-ai .uxa-live{opacity:.5;right:-30%;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #ux-ai .uxa-live *{animation:none!important;}}


/* awards — name + award on the left, rating on the right, editorial rows */
#wdi-ux-page #awA .ava-row{display:grid!important;grid-template-columns:56px minmax(0,1fr) auto;
  grid-template-areas:"idx name rate" "idx award rate";align-items:center;column-gap:clamp(18px,2.4vw,36px);row-gap:6px;
  padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid rgba(12,12,20,.09);position:relative;}
#wdi-ux-page #awA .ava-row:first-of-type{border-top:1px solid rgba(12,12,20,.09);}
#wdi-ux-page #awA .ava-main{display:contents!important;}
#wdi-ux-page #awA .ava-idx{grid-area:idx;align-self:start;padding-top:10px;font-family:var(--font-space-grotesk),ui-monospace,monospace;
  font-size:12px;letter-spacing:.14em;color:#9A9EA6;}
#wdi-ux-page #awA .ava-name{grid-area:name;font-size:clamp(28px,3.4vw,48px);font-weight:400;letter-spacing:-0.045em;line-height:1.05;color:#0B0C0E;}
#wdi-ux-page #awA .ava-right{grid-area:award;display:flex!important;flex-wrap:wrap;align-items:baseline;gap:4px 14px;position:static!important;}
#wdi-ux-page #awA .ava-award{font-size:14.5px;color:#3A3D44;}
#wdi-ux-page #awA .ava-meta{font-family:var(--font-space-grotesk),ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#F92F64;}
#wdi-ux-page #awA .ava-stars{grid-area:rate;justify-self:end;align-self:center;margin:0!important;position:relative;
  transform:translateY(-12px);}
#wdi-ux-page #awA .ava-rate-num{grid-area:rate;justify-self:end;align-self:center;transform:translateY(20px);
  font-size:clamp(22px,2.2vw,30px);font-weight:400;letter-spacing:-0.03em;color:#0B0C0E;font-variant-numeric:tabular-nums;}
#wdi-ux-page #awA .ava-rate-num::after{content:" / 5";font-size:.5em;color:#9A9EA6;letter-spacing:0;}
#wdi-ux-page #awA .ava-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(90deg,#F92F64,#A24BFF);
  transition:width .6s cubic-bezier(.22,.61,.36,1);}
#wdi-ux-page #awA .ava-row:hover::after{width:100%;}
/* rows without star ratings: show the honour as the right-hand badge */
#wdi-ux-page #awA .ava-honours{grid-area:rate;justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid rgba(249,47,100,.28);border-radius:999px;background:rgba(249,47,100,.05);
  font-family:var(--font-space-grotesk),ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#F92F64;white-space:nowrap;}
#wdi-ux-page #awA .ava-honours::before{content:"";width:5px;height:5px;border-radius:50%;background:#F92F64;}
#wdi-ux-page #awA .ava-row:has(.ava-honours) .ava-meta{display:none;}
/* keep the liquid-metal sphere behind the list */
#wdi-ux-page #awA .ava-row{z-index:2;background:transparent;}
#wdi-ux-page #awA .ava-orb-wrap{z-index:0!important;pointer-events:none;}
#wdi-ux-page #awA .ava-orb-wrap canvas,#wdi-ux-page #awA .ava-orb-wrap .ava-orb,#wdi-ux-page #awA .ava-orb-wrap [class*="sphere"]{pointer-events:auto;}
#wdi-ux-page #awA .ava-orb-wrap [class*="cap"],#wdi-ux-page #awA .ava-orb-wrap [class*="hint"]{opacity:.55;}
@media(max-width:640px){#wdi-ux-page #awA .ava-honours{justify-self:start;}}
@media(max-width:640px){
  #wdi-ux-page #awA .ava-row{grid-template-columns:36px minmax(0,1fr);grid-template-areas:"idx name" "idx award" "idx rate";}
  #wdi-ux-page #awA .ava-stars,#wdi-ux-page #awA .ava-rate-num{justify-self:start;transform:none;}
  #wdi-ux-page #awA .ava-rate-num{margin-left:120px;margin-top:-26px;}
}


#wdi-ux-page section#capabilities .mrs-h.mrs-h{font-size:clamp(34px,5vw,76px)!important;letter-spacing:-0.05em!important;line-height:1.04!important;font-weight:400!important;}


/* icon + tag spacing: icon sits top-left, the numbered tag starts on its own line with clear air */
#wdi-ux-page #extend .mrs-cell,#wdi-ux-page #capabilities .mrs-cell{display:flex!important;flex-direction:column!important;align-items:flex-start!important;}
#wdi-ux-page #extend .mrs-ic,#wdi-ux-page #capabilities .mrs-ic{position:static!important;margin:0 0 clamp(28px,2.6vw,40px)!important;flex:none;}
#wdi-ux-page #extend .mrs-body,#wdi-ux-page #extend .mrs-cell > .mrs-body,#wdi-ux-page #capabilities .mrs-body,#wdi-ux-page #capabilities .mrs-cell > .mrs-body{position:static!important;display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0!important;padding-top:0!important;}
#wdi-ux-page #extend .mrs-n,#wdi-ux-page #capabilities .mrs-n{display:block!important;position:static!important;margin:0 0 14px!important;padding:0!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace;font-size:11px!important;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;line-height:1;white-space:nowrap;}
#wdi-ux-page #extend .mrs-n br,#wdi-ux-page #capabilities .mrs-n br{display:none;}
#wdi-ux-page #extend .mrs-body h3,#wdi-ux-page #capabilities .mrs-body h3{margin:0 0 12px!important;}
#wdi-ux-page #extend .mrs-body p,#wdi-ux-page #capabilities .mrs-body p{margin:0!important;}
#wdi-ux-page #extend .mrs-pill,#wdi-ux-page #capabilities .mrs-pill{margin-top:auto;}


#wdi-ux-page .mad-strip{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
#wdi-ux-page .mad-track{display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;animation:madMarq 34s linear infinite;}
#wdi-ux-page .mad-strip:hover .mad-track{animation-play-state:paused;}
#wdi-ux-page .mad-logo{display:flex;align-items:center;height:56px;flex:0 0 auto;}
#wdi-ux-page .mad-logo img{max-height:44px;max-width:150px;width:auto;object-fit:contain;transition:transform .45s cubic-bezier(.22,.61,.36,1);}
#wdi-ux-page .mad-logo:hover img{transform:scale(1.12);}
@keyframes madMarq{to{transform:translateX(-50%);}}
#wdi-ux-page .mad-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(12,12,20,.1);}
#wdi-ux-page .mad-stat{display:flex;flex-direction:column;gap:10px;padding:28px 24px 4px 0;}
#wdi-ux-page .mad-stat + .mad-stat{padding-left:24px;border-left:1px solid rgba(12,12,20,.1);}
#wdi-ux-page .mad-k{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6b6f78;}
#wdi-ux-page .mad-v{font-size:clamp(19px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.25;color:#0b0c0e;text-wrap:balance;}
@media(max-width:820px){#wdi-ux-page .mad-stats{grid-template-columns:repeat(2,minmax(0,1fr));}#wdi-ux-page .mad-stat:nth-child(3){padding-left:0;border-left:0;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .mad-track{animation:none;}}

/* stats — premium redesign */
#wdi-ux-page .mad-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(48px,6vw,80px);border-top:0;position:relative;}
#wdi-ux-page .mad-stats::before{content:"";position:absolute;left:var(--gut,0);right:var(--gut,0);top:0;height:1px;background:linear-gradient(90deg,#F92F64,rgba(249,47,100,.25) 40%,rgba(12,12,20,.1));transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.22,.61,.36,1) .15s;}
#wdi-ux-page .mad-eco.in .mad-stats::before{transform:scaleX(1);}
#wdi-ux-page .mad-stat{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:30px 28px 6px 0!important;border-left:0!important;
  opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.22,.61,.36,1) calc(var(--d) + .35s),transform .9s cubic-bezier(.22,.61,.36,1) calc(var(--d) + .35s);}
#wdi-ux-page .mad-stat + .mad-stat{padding-left:28px!important;box-shadow:inset 1px 0 0 rgba(12,12,20,.08);}
#wdi-ux-page .mad-eco.in .mad-stat{opacity:1;transform:none;}
#wdi-ux-page .mad-top{display:flex;align-items:center;gap:10px;margin-bottom:22px;}
#wdi-ux-page .mad-top em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.08em;color:#F92F64;font-variant-numeric:tabular-nums;}
#wdi-ux-page .mad-k{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6b6f78;}
#wdi-ux-page .mad-n{font-size:clamp(40px,4.4vw,64px);font-weight:500;letter-spacing:-.045em;line-height:1;color:#0b0c0e;font-variant-numeric:tabular-nums;}
#wdi-ux-page .mad-u{margin-top:10px;font-size:15px;font-weight:500;color:#4a4d55;letter-spacing:-.01em;}
#wdi-ux-page .mad-w{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.14;color:#0b0c0e;text-wrap:balance;max-width:14ch;}
@media(max-width:820px){#wdi-ux-page .mad-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px;}#wdi-ux-page .mad-stat:nth-child(3){padding-left:0!important;box-shadow:none;}}

/* default section transition — every section after the hero rises into place */
#wdi-ux-page .sec-tx{opacity:0;transform:translateY(64px);transform-origin:50% 0;
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.3s cubic-bezier(.16,1,.3,1);will-change:transform,opacity;}
#wdi-ux-page .sec-tx.in{opacity:1;transform:none;}
#wdi-ux-page .sec-tx .lp-eco-head{opacity:0;transform:translateY(22px);transition:opacity .9s ease .2s,transform 1s cubic-bezier(.16,1,.3,1) .2s;}
#wdi-ux-page .sec-tx.in .lp-eco-head{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){#wdi-ux-page .sec-tx,#wdi-ux-page .sec-tx .lp-eco-head,#wdi-ux-page .mad-stat{opacity:1!important;transform:none!important;transition:none!important;}#wdi-ux-page .mad-stats::before{transform:scaleX(1);}}

/* ===== page-level alignment: every section shares one 1200px content column ===== */
#wdi-ux-page{--ink:#0B0C0E;--ink-2:#3A3D44;--muted:#5F636B;--faint:#9A9EA6;--line-2:rgba(12,12,20,.14);
  --rose-300:#FF8FB0;--rose-500:#F92F64;--rose-600:#E0204F;--mono:var(--font-space-grotesk),ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);--measure:1280px;--gutter:40px;}
/* ONE container for every section, hero included */
#wdi-ux-page .hb1-body,#wdi-ux-page .hb1-crumb,#wdi-ux-page .hb1-meta,#wdi-ux-page .wrap,#wdi-ux-page #proof .mad-stats,#wdi-ux-page #decisions .mdg-head,#wdi-ux-page #decisions .mdg-grid{
  max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;
  padding-left:clamp(20px,5vw,64px)!important;padding-right:clamp(20px,5vw,64px)!important;box-sizing:border-box!important;}
#wdi-ux-page #decisions .mdg-grid{margin-top:clamp(48px,5.6vw,88px);gap:clamp(14px,1.6vw,24px);}
#wdi-ux-page #decisions .mdg-cell{border-radius:22px;overflow:hidden;}
#wdi-ux-page #decisions{overflow-x:clip;}
/* no entrance animations: every section and its contents show in place */
#wdi-ux-page .sec-tx,#wdi-ux-page .sec-tx .lp-eco-head,#wdi-ux-page .mad-stat,#wdi-ux-page .spm-grid .spm-card,#wdi-ux-page .spm-head .spm-eye,#wdi-ux-page .spm-head .spm-h,#wdi-ux-page .spm-head .spm-lead,#wdi-ux-page .mdg-grid .mdg-cell,#wdi-ux-page .mai-c,#wdi-ux-page .mte-cell,#wdi-ux-page .mws-card,#wdi-ux-page .mrs-cell,#wdi-ux-page .msol-panel{opacity:1!important;transform:none!important;transition-property:background,color,box-shadow,border-color!important;}
#wdi-ux-page .mad-stats::before{transform:scaleX(1)!important;transition:none!important;}
#wdi-ux-page section.t02-sec,#wdi-ux-page .t02-sec,#wdi-ux-page .t02-sec .t02-stagger,#wdi-ux-page .t02-stagger > *{opacity:1!important;transform:none!important;transition:none!important;}
/* remaining in-section reveals: process intro, testimonials, awards rows, portfolio card text */
#wdi-ux-page #process .pr-eyebrow,#wdi-ux-page #process .prx-p,#wdi-ux-page #process .pr-header-cta,#wdi-ux-page #process .prx-l,#wdi-ux-page #process .prx-l i,#wdi-ux-page #ai-process .pr-eyebrow,#wdi-ux-page #ai-process .prx-p,#wdi-ux-page #ai-process .pr-header-cta,#wdi-ux-page #ai-process .prx-l,#wdi-ux-page #ai-process .prx-l i,#wdi-ux-page #awA .reveal,#wdi-ux-page #awA .ava-head,#wdi-ux-page #awA .ava-row,#wdi-ux-page #work .pp-logo,#wdi-ux-page #work .pp-eyebrow,#wdi-ux-page #work .pp-name,#wdi-ux-page #work .pp-tagline,#wdi-ux-page #work .pp-desc,#wdi-ux-page #work .pp-row,#wdi-ux-page #work .pp-rev,#wdi-ux-page #work .pp-keystat-label,#wdi-ux-page #work .pp-keystat-h,#wdi-ux-page #work .pp-mcaps,#wdi-ux-page #ai-experiences .mai-media-ic,#wdi-ux-page #related .fc-card{
  opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important;}
/* capabilities: product shots contained inside each card, anchored bottom-right */
#wdi-ux-page #capabilities .mrs-cell{position:relative;overflow:hidden!important;}
#wdi-ux-page #capabilities .mrs-body{position:static!important;}
#wdi-ux-page #capabilities .mrs-shot{position:absolute!important;right:clamp(16px,1.6vw,24px)!important;bottom:0!important;
  top:auto!important;left:auto!important;width:auto!important;height:auto!important;
  max-width:42%!important;max-height:78%!important;object-fit:contain!important;object-position:bottom right!important;
  pointer-events:none;z-index:0;}
#wdi-ux-page #capabilities .mrs-body > :not(.mrs-shot),#wdi-ux-page #capabilities .mrs-ic,#wdi-ux-page #capabilities .mrs-pill{position:relative;z-index:1;}
#wdi-ux-page #capabilities .mrs-cell:has(.mrs-shot) .mrs-body p,#wdi-ux-page #capabilities .mrs-cell:has(.mrs-shot) .mrs-body h3{max-width:52%;}
/* explicit per-shot sizing so each image fills its card's right half cleanly */
#wdi-ux-page #capabilities .mrs-shot.s-c1,#wdi-ux-page #capabilities .mrs-shot.s-c6,#wdi-ux-page #capabilities .mrs-shot.s-c7{width:34%!important;max-height:86%!important;}
#wdi-ux-page #capabilities .mrs-shot.s-c2{width:44%!important;max-width:44%!important;max-height:72%!important;bottom:50%!important;transform:translateY(50%)!important;right:clamp(14px,1.4vw,22px)!important;}
@media(max-width:760px){
  #wdi-ux-page #capabilities .mrs-shot{display:none!important;}
  #wdi-ux-page #capabilities .mrs-body p,#wdi-ux-page #capabilities .mrs-body h3{max-width:none!important;}
  /* Keep Explore button clear of the copy — margin-top:auto collapses when cards are short */
  #wdi-ux-page #capabilities .mrs-body p,#wdi-ux-page #extend .mrs-body p{margin:0 0 22px!important;}
  #wdi-ux-page #capabilities .mrs-pill,#wdi-ux-page #extend .mrs-pill{
    margin-top:0!important;flex:none;align-self:flex-start!important;
    width:auto!important;max-width:max-content;display:inline-flex!important;
  }
}
/* final CTA */
#wdi-ux-page .mad-final{background:#0B0C0E!important;color:#fff;padding:clamp(96px,10vw,160px) 0!important;position:relative;overflow:hidden;}
#wdi-ux-page .mad-final .pp-cta{margin:0!important;width:auto!important;left:auto!important;transform:none!important;min-height:0!important;
  background:transparent!important;border-radius:0!important;padding:0!important;color:#fff!important;
  position:static!important;overflow:visible!important;}
#wdi-ux-page .mad-final .pp-cta{display:block!important;text-align:left!important;place-items:unset!important;}
#wdi-ux-page .mad-final .pp-cta-in{padding:0!important;margin:0!important;max-width:none!important;width:100%!important;position:relative;z-index:1;text-align:left!important;}
#wdi-ux-page .mad-final .pp-cta-h{max-width:18ch;margin:0!important;text-align:left!important;text-wrap:pretty;}
#wdi-ux-page .mad-final .pp-cta-p{max-width:60ch;margin:24px 0 0!important;text-align:left!important;}
#wdi-ux-page .mad-final .pp-cta-actions{justify-content:flex-start!important;}
#wdi-ux-page .mad-final .hxf-eye,#wdi-ux-page .mad-final .hxf-micro{text-align:left!important;}
#wdi-ux-page .mad-final .pp-cta-aura,#wdi-ux-page .mad-final .pp-cta-dots{position:absolute!important;inset:0!important;}
#wdi-ux-page .mad-final .pp-cta-h,#wdi-ux-page .mad-final .pp-cta-p,#wdi-ux-page .mad-final .pp-cta-actions{opacity:1!important;transform:none!important;transition:none!important;}
#wdi-ux-page .mad-final .pp-cta-h{color:#fff!important;}
#wdi-ux-page .mad-final .pp-cta-h em{color:#FF7BA3!important;-webkit-text-fill-color:#FF7BA3!important;background:none!important;font-style:normal;}
#wdi-ux-page .mad-final .pp-cta-p{color:rgba(255,255,255,.72)!important;}
#wdi-ux-page .mad-final .pp-cta-btn{background:#F92F64!important;color:#fff!important;border-color:#F92F64!important;}
#wdi-ux-page .mad-final .pp-cta-btn:hover{background:#fff!important;color:#F92F64!important;border-color:#fff!important;}
#wdi-ux-page footer.ft2{background:#0B0C0E!important;color:#fff!important;}
#wdi-ux-page .mad-final .pp-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;}
#wdi-ux-page .mad-final .pp-cta-link{color:rgba(255,255,255,.82);font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.35);transition:color .25s,text-decoration-color .25s;}
#wdi-ux-page .mad-final .pp-cta-link:hover{color:#FF7BA3;text-decoration-color:#FF7BA3;}
/* testimonials: a single moving row */
#wdi-ux-page #ts-b .tsm-head,#wdi-ux-page #ts-b .tsm-head *,#wdi-ux-page #ts-b .ts-eyebrow,#wdi-ux-page #ts-b .ts-h,#wdi-ux-page #ts-b .ts-sub{opacity:1!important;transform:none!important;filter:none!important;visibility:visible!important;transition:none!important;}
#wdi-ux-page #ts-b .ts-h{color:#0B0C0E!important;}#wdi-ux-page #ts-b .ts-sub{color:#5F636B!important;}#wdi-ux-page #ts-b .ts-eyebrow{color:#F92F64!important;}
#wdi-ux-page #ts-b .tsm-rows > *:nth-child(n+2){display:none!important;}
#wdi-ux-page #ts-b .tsm-rows{opacity:1!important;}
/* dark CTA band */
#wdi-ux-page section.mad-cta-dark{background:#0B0C0E!important;color:#fff!important;}
#wdi-ux-page .mad-cta-dark .t02-cta-band-track{color:rgba(255,255,255,.06)!important;-webkit-text-stroke:0!important;}
#wdi-ux-page .mad-cta-dark .tag{color:#FF7BA3!important;}
#wdi-ux-page .mad-cta-dark h2{color:#fff!important;}
#wdi-ux-page .mad-cta-dark h2 em{color:#FF7BA3!important;-webkit-text-fill-color:#FF7BA3!important;background:none!important;}
#wdi-ux-page .mad-cta-dark p{color:rgba(255,255,255,.72)!important;}
#wdi-ux-page .mad-cta-dark .lp-btn-primary{background:#F92F64!important;color:#fff!important;border-color:#F92F64!important;}
#wdi-ux-page .mad-cta-dark .lp-btn-primary:hover{background:#fff!important;color:#F92F64!important;border-color:#fff!important;}
#wdi-ux-page,#wdi-ux-page{overflow-x:clip;}
#wdi-ux-page #industries .mic-track{
  padding-left:max(clamp(20px,5vw,64px), calc((100vw - 1280px) / 2 + clamp(20px,5vw,64px)))!important;
  padding-right:max(clamp(20px,5vw,64px), calc((100vw - 1280px) / 2 + clamp(20px,5vw,64px)))!important;}
#wdi-ux-page #decisions{padding-bottom:clamp(96px,11vw,160px)!important;}



#wdi-ux-page #capabilities .mrs-cell{display:flex!important;flex-direction:column!important;align-items:flex-start!important;}
#wdi-ux-page #capabilities .mrs-ic{position:static!important;margin:0 0 clamp(28px,2.6vw,40px)!important;flex:none;}
#wdi-ux-page #capabilities .mrs-body,#wdi-ux-page #capabilities .mrs-cell > .mrs-body{position:static!important;display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0!important;padding-top:0!important;}
#wdi-ux-page #capabilities .mrs-n{display:block!important;position:static!important;margin:0 0 14px!important;padding:0!important;
  font-family:var(--font-space-grotesk),ui-monospace,monospace;font-size:11px!important;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;line-height:1;white-space:nowrap;}
#wdi-ux-page #capabilities .mrs-n br{display:none;}
#wdi-ux-page #capabilities .mrs-body h3{margin:0 0 12px!important;}
#wdi-ux-page #capabilities .mrs-body p{margin:0!important;}
#wdi-ux-page #capabilities .mrs-pill{margin-top:auto;}
@media(max-width:900px){
  #wdi-ux-page #capabilities .mrs-body p,#wdi-ux-page #extend .mrs-body p{margin:0 0 22px!important;}
  #wdi-ux-page #capabilities .mrs-pill,#wdi-ux-page #extend .mrs-pill{
    margin-top:0!important;flex:none;align-self:flex-start!important;
    width:auto!important;max-width:max-content;display:inline-flex!important;
  }
}


/* why wdi — pinned horizontal scroll through the reasons rail (same behaviour as industries) */
#wdi-ux-page .wwy-pin{position:relative;z-index:3;}
#wdi-ux-page .wwy-pin.on > #sw-why{position:sticky;top:0;height:100vh;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(28px,7vh,96px)!important;padding-bottom:clamp(24px,5vh,80px)!important;}
#wdi-ux-page .wwy-pin.on #swWhyRail{overflow:hidden!important;scroll-snap-type:none!important;}
#wdi-ux-page .wwy-pin.on #swWhyRail > *{will-change:transform,opacity;transform-origin:50% 60%;}
#wdi-ux-page .wwy-pin.on #sw-why .lp-wy-rail-wrap{margin-top:clamp(20px,4vh,56px)!important;}
@media(max-width:900px),(max-height:620px),(prefers-reduced-motion:reduce){#wdi-ux-page .wwy-pin{height:auto!important;}#wdi-ux-page .wwy-pin > #sw-why{position:relative;height:auto;}}


/* Why WDI — original cards, CTA on the right, calm live backdrop */
#wdi-ux-page #sw-why{position:relative;overflow:hidden;isolation:isolate;}
#wdi-ux-page #sw-why > .wrap{position:relative;z-index:1;}
#wdi-ux-page #sw-why .wwy-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;}
#wdi-ux-page #sw-why .wwy-top .lp-head{margin-bottom:0!important;}
#wdi-ux-page #sw-why .wwy-cta{margin:0!important;justify-content:flex-end!important;}
#wdi-ux-page #sw-why .lp-wy-rail-wrap{margin-top:clamp(28px,4vw,52px);}
#wdi-ux-page #sw-why .wwy-live{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);}
#wdi-ux-page #sw-why .wwy-live svg{width:100%;height:100%;}
#wdi-ux-page #sw-why .wl-trace path{stroke:rgba(255,255,255,.07);stroke-width:1.1;}
#wdi-ux-page #sw-why .wl-comet use{stroke:#F92F64;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:80 2400;stroke-dashoffset:2480;animation:wlComet 20s linear infinite;opacity:.75;}
#wdi-ux-page #sw-why .wl-comet use.c2{stroke:#A24BFF;animation-duration:24s;animation-delay:-10s;}
#wdi-ux-page #sw-why .wl-comet use.c3{animation-duration:18s;animation-delay:-5s;opacity:.5;}
@keyframes wlComet{to{stroke-dashoffset:0;}}
#wdi-ux-page #sw-why .wl-nodes circle{fill:#08090B;stroke:rgba(249,47,100,.45);stroke-width:1.1;}
@media(max-width:760px){#wdi-ux-page #sw-why .wwy-top{grid-template-columns:1fr;}#wdi-ux-page #sw-why .wwy-cta{justify-content:flex-start!important;}}
@media(prefers-reduced-motion:reduce){#wdi-ux-page #sw-why .wl-comet use{animation:none;}}

#wdi-ux-page .wwy-pin:not(.on) #sw-why .lp-wy-card,#wdi-ux-page #sw-why .lp-wy-foot,#wdi-ux-page #sw-why .lp-head>*{opacity:1!important;transform:none!important;}
#wdi-ux-page .wwy-pin.on #sw-why .lp-wy-card{transition:none!important;}

#wdi-ux-page #hero ~ section#sw-why .lp-h,#wdi-ux-page section#sw-why .lp-h.lp-h,#wdi-ux-page section#faq-a .fq-h.fq-h{font-size:clamp(34px,5vw,76px)!important;letter-spacing:-0.05em!important;line-height:1.04!important;font-weight:400!important;}
#wdi-ux-page section#sw-why .wdi-eye,#wdi-ux-page section#faq-a .wdi-eye{margin-bottom:clamp(18px,2.2vw,26px);}


#wdi-ux-page #awA .ava-name{display:inline-flex;align-items:center;gap:clamp(12px,1.2vw,18px);}
#wdi-ux-page #awA .ava-logo{flex:none;width:clamp(34px,2.8vw,44px);height:clamp(34px,2.8vw,44px);border-radius:12px;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(12,12,20,.08),0 8px 18px -10px rgba(12,12,20,.3);}
#wdi-ux-page #awA .ava-logo img{width:62%;height:62%;object-fit:contain;display:block;}

#wdi-ux-page #awA .ava-mode{display:none!important;}

/* Removed industry "Learn more" CTAs site-wide */
.ais-ind-more{display:none!important;}

/* capabilities: copy stays on the left, shots stay in the lower-right of the card */
#wdi-ux-page #capabilities .mrs-cell{overflow:hidden!important;}
#wdi-ux-page #capabilities .mrs-body{position:relative!important;z-index:1;margin-top:0!important;max-width:100%;}
#wdi-ux-page #capabilities .mrs-cell:has(.mrs-shot) .mrs-body{max-width:62%;}
#wdi-ux-page #capabilities .mrs-cell:has(.mrs-shot) .mrs-n,
#wdi-ux-page #capabilities .mrs-cell:has(.mrs-shot) .mrs-body h3,
#wdi-ux-page #capabilities .mrs-cell:has(.mrs-shot) .mrs-body p{max-width:none!important;}
#wdi-ux-page #capabilities .mrs-shot{position:absolute!important;right:10px!important;bottom:10px!important;
  top:auto!important;left:auto!important;width:auto!important;height:auto!important;
  max-width:40%!important;max-height:48%!important;transform:none!important;
  object-fit:contain!important;object-position:right bottom!important;z-index:0;}
#wdi-ux-page #capabilities .mrs-shot.s-c2{max-width:46%!important;max-height:54%!important;}
#wdi-ux-page #capabilities .mrs-shot.s-c6{max-width:36%!important;max-height:62%!important;}