#wdi-wf-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-wf-page,#wdi-wf-page *{box-sizing:border-box;}
html.wdi-wf-root,html.wdi-wf-root body{overflow-x:clip;}
html.wdi-wf-root body{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-wf-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;
}



.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* ---- shared section header ---- */
.sec-head { max-width: 820px; }
.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);
}
.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);
}
.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;
}
.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;
}
.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) ---- */
.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);
}
.variant-tag b { color: var(--ink); font-weight: 600; }
.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)
   ============================================================ */
.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);
}
.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
   ============================================================ */
.outcomes { position: relative; padding: 100px 0 112px; overflow: hidden; }
.outcomes--a { background: #0A0B0D; color: #fff; }
.outcomes--b { background: var(--bg-2); border-top: 1px solid var(--line); }

/* drifting ambient orbs */
.amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.amb span { position: absolute; border-radius: 50%; filter: blur(80px); }
.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; }
.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; }
.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; }
.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); } }

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

/* ============================================================
   VARIANT A — HORIZONTAL EXPANDING CARDS
   ============================================================ */
.oa-row {
  margin-top: 54px;
  display: flex;
  gap: 14px;
  height: 460px;
}
.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;
}
.oa-panel.active {
  flex-grow: 5.4;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.oa-panel.is-ai.active { border-color: rgba(170,90,255,.4); }
.oa-panel .ai-aura { opacity: 0; }
.oa-panel.is-ai.active .ai-aura { opacity: .28; }

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

/* collapsed rail */
.oa-rail {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 0;
  opacity: 1;
  transition: opacity .35s ease;
}
.oa-panel.active .oa-rail { opacity: 0; pointer-events: none; }
.oa-num {
  font-size: 16px; font-weight: 500; color: rgba(255,255,255,.5);
  font-feature-settings: "tnum" 1;
}
.oa-ico { color: var(--rose-300); margin-top: 18px; }
.oa-ico svg { width: 26px; height: 26px; display: block; }
.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 */
.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;
}
.oa-panel.active .oa-full { opacity: 1; transform: none; }
.oa-full-top { display: flex; align-items: center; justify-content: space-between; }
.oa-num--lg { font-size: 22px; color: rgba(255,255,255,.45); }
.oa-ico--lg { color: var(--rose-300); margin: 0; }
.oa-ico--lg svg { width: 32px; height: 32px; }
.oa-title {
  margin-top: 26px; font-size: 27px; font-weight: 500; letter-spacing: -0.025em;
  line-height: 1.08; color: #fff; max-width: 18ch;
}
.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;
}
.oa-desc {
  margin-top: 12px; font-size: 14px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,.66); max-width: 46ch;
}
.oa-rel { margin-top: auto; padding-top: 22px; }
.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;
}
.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
   ============================================================ */
.ob-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.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;
}
#variant-b.in .ob-card { transform: none; transition-delay: var(--d); }
.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;
}
.ob-card:hover { border-color: var(--rose-300); box-shadow: 0 20px 54px rgba(11,12,14,.10); }
.ob-card:hover::after { opacity: 1; }

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

.ob-top { display: flex; align-items: center; justify-content: space-between; }
.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;
}
.ob-ico svg { width: 26px; height: 26px; }
.ob-card:hover .ob-ico { background: linear-gradient(135deg, var(--rose-600), var(--rose-400)); color: #fff; transform: scale(1.05); }
.ob-card.is-ai .ob-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); color: #fff; }
.ob-num {
  font-size: 34px; font-weight: 300; letter-spacing: -0.04em; color: #DDE0E5;
  font-feature-settings: "tnum" 1;
}
.ob-card.is-ai .ob-num {
  background: linear-gradient(135deg, var(--rose-500), #7A00FF); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.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;
}
.ob-short {
  margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.45;
  letter-spacing: -0.01em; color: var(--ink-2);
}
.ob-desc {
  margin-top: 12px; font-size: 14px; font-weight: 300; line-height: 1.62; color: var(--muted);
}
.ob-rel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.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;
}
.ob-rel-text { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }

/* ============================================================
   VARIANT C — PREMIUM BENTO GRID (asymmetric tiles)
   ============================================================ */
.oc-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.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;
}
#variant-c.in .oc-card { transform: none; transition-delay: var(--d); }
.oc-card.w2 { grid-column: span 2; }
.oc-card.w3 { grid-column: span 3; }
.oc-card.w4 { grid-column: span 4; }

.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;
}
.oc-card:hover { border-color: var(--rose-300); box-shadow: 0 20px 54px rgba(11,12,14,.10); transform: translateY(-3px); }
#variant-c.in .oc-card:hover { transform: translateY(-3px); }
.oc-card:hover::after { opacity: 1; }

.oc-face { position: relative; z-index: 2; padding: 30px 30px 28px; height: 100%; display: flex; flex-direction: column; }
.oc-top { display: flex; align-items: center; justify-content: space-between; }
.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;
}
.oc-ico svg { width: 24px; height: 24px; }
.oc-card:hover .oc-ico { background: linear-gradient(135deg, var(--rose-600), var(--rose-400)); color: #fff; transform: scale(1.05); }
.oc-num { font-size: 30px; font-weight: 300; letter-spacing: -0.04em; color: #DDE0E5; font-feature-settings: "tnum" 1; }
.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; }
.oc-short { margin-top: 11px; font-size: 14.5px; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); }
.oc-desc { margin-top: 11px; font-size: 13.6px; font-weight: 300; line-height: 1.6; color: var(--muted); }
.oc-rel { margin-top: auto; padding-top: 18px; }
.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; }
.oc-rel-text { font-size: 12.8px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }

/* wide tiles: two-column horizontal layout */
.oc-face--wide { flex-direction: row; gap: 34px; align-items: stretch; }
.oc-face--wide .oc-wide-l { flex: 0 0 42%; display: flex; flex-direction: column; justify-content: center; }
.oc-face--wide .oc-wide-l .oc-short { margin-top: 12px; }
.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; }
.oc-face--wide .oc-rel { margin-top: 16px; }

/* AI featured tile — dark with ambient aura */
.oc-card.is-ai {
  background: #0A0B0D;
  border-color: #17191e;
}
.oc-card.is-ai .oc-face--wide .oc-wide-r { border-left-color: rgba(255,255,255,.12); }
.oc-card.is-ai .oc-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); color: #fff; }
.oc-card.is-ai .oc-num { color: rgba(255,255,255,.4); }
.oc-card.is-ai .oc-title { color: #fff; }
.oc-card.is-ai .oc-short { color: rgba(255,255,255,.9); }
.oc-card.is-ai .oc-desc { color: rgba(255,255,255,.66); }
.oc-card.is-ai .oc-rel-label { color: var(--rose-300); }
.oc-card.is-ai .oc-rel-text { color: rgba(255,255,255,.74); }
.oc-card.is-ai .ai-aura { opacity: .26; }
.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)
   ============================================================ */
.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;
}
.outcomes--a .out-cta { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.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);
}
.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); }
.out-cta-h { font-size: clamp(20px, 2vw, 25px); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.outcomes--a .out-cta-h { color: #fff; }
.outcomes--b .out-cta-h { color: var(--ink); }
.out-cta-p { margin-top: 10px; font-size: 15px; line-height: 1.55; font-weight: 300; max-width: 62ch; text-wrap: pretty; }
.outcomes--a .out-cta-p { color: rgba(255,255,255,.74); }
.outcomes--b .out-cta-p { color: var(--ink-2); }
.out-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
.out-btn-primary, .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;
}
.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); }
.out-btn-primary svg { width: 17px; height: 17px; transition: transform .25s ease; }
.out-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(228,18,82,.34); }
.out-btn-primary:hover svg { transform: translateX(3px); }
.outcomes--a .out-btn-secondary { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.22); }
.outcomes--a .out-btn-secondary:hover { border-color: var(--rose-300); transform: translateY(-2px); }
.outcomes--b .out-btn-secondary { color: var(--ink); background: transparent; border: 1px solid var(--line-2); }
.outcomes--b .out-btn-secondary:hover { border-color: var(--rose-300); transform: translateY(-2px); }

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




:where(#wdi-wf-page) a{ color:inherit; }
:where(#wdi-wf-page) img{ display:block; max-width:100%; }

/* ---- variant label strip (dev affordance, mirrors other variant files) ---- */
.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%;
}
.svv-vtag b{ color:var(--ink); font-weight:600; }
.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 ---- */
.svv-sec{ padding:clamp(64px,8vw,108px) 0; border-top:1px solid var(--line); }
.svv-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.sv2{ background:var(--bg-2); }
.sv4{ background:var(--bg-2); }

.svv-head{ max-width:880px; }
.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);
}
.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);
}
.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;
}
.svv-answer,.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 */
.svv-btn-dark,.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;
}
.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); }
.svv-btn-dark svg{ width:17px; height:17px; transition:transform .25s ease; }
.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); }
.svv-btn-dark:hover svg{ transform:translateX(3px); }
.svv-btn-ghost{ color:var(--ink); background:transparent; border:1px solid var(--line-2); }
.svv-btn-ghost:hover{ border-color:var(--rose-300); transform:translateY(-2px); }

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

/* ============================================================
   VARIANT A — CAPSULE SWITCHER + DEVICE VISUAL
   ============================================================ */
.sv1-pills{
  margin-top:clamp(32px,4vw,52px);
  display:flex; flex-wrap:wrap; gap:12px;
}
.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;
}
.sv1-pill .pill-ico{ width:18px; height:18px; color:var(--rose-600); transition:color .3s ease; }
.sv1-pill .pill-ico svg{ width:100%; height:100%; }
.sv1-pill:hover{ border-color:var(--rose-300); transform:translateY(-2px); }
.sv1-pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 10px 26px rgba(11,12,14,.16); }
.sv1-pill.active .pill-ico{ color:var(--rose-400); }

.sv1-split{
  margin-top:26px;
  display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:stretch;
}
.sv1-panel{
  background:var(--bg); border:1px solid var(--line); border-radius:24px;
  padding:clamp(28px,3vw,42px); display:flex; flex-direction:column;
}
.sv1-num{
  font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--rose-600);
  font-feature-settings:"tnum" 1;
}
.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;
}
.sv1-desc{
  margin-top:14px; font-size:16px; line-height:1.6; font-weight:300; color:var(--ink-2);
  max-width:50ch;
}
.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);
}
.sv1-subs{
  margin:14px 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:11px 22px;
}
.sv1-subs li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:400; color:var(--ink-2); }
.sv1-outcomes{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.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;
}
.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%) */
.sv1-visual{
  position:relative; border-radius:24px; overflow:hidden; min-height:520px;
  background:#0A0B0E; border:1px solid var(--line);
}
.sv1-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.sv1-visual:hover .sv1-photo{ transform:scale(1.045); }
.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%);
}
.sv1-photo-cap{ position:absolute; left:clamp(24px,3vw,38px); right:24px; bottom:clamp(24px,3vw,36px); z-index:2; color:#fff; }
.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);
}
.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);
}
.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
   ============================================================ */
.sv2-body{
  margin-top:clamp(36px,5vw,60px);
  display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(32px,5vw,72px); align-items:start;
}
.sv2-names{ display:flex; flex-direction:column; }
.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);
}
.sv2-names .sv2-name:last-child{ border-bottom:1px solid var(--line); }
.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;
}
.sv2-name .nm-txt{ display:block; }
.sv2-name:hover{ color:var(--ink-2); padding-left:10px; }
.sv2-name.active{ color:var(--ink); padding-left:10px; }
.sv2-name.active .nm-idx{ color:var(--rose-600); }

.sv2-side{ position:sticky; top:40px; }
.sv2-side-img{
  position:relative; aspect-ratio:5/4; border-radius:18px; overflow:hidden;
  background:#0A0B0E; border:1px solid var(--line);
}
.sv2-side-img img{ width:100%; height:100%; object-fit:cover; transition:opacity .5s ease; }
.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);
}
.sv2-side-desc{ margin:20px 0 0; font-size:15.5px; line-height:1.6; font-weight:300; color:var(--ink-2); }
.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);
}
.sv2-subs2{ margin:12px 0 0; padding:0; list-style:none; }
.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);
}
.sv2-subs2 li:first-child{ border-top:none; }
.sv2-side-cta{ margin-top:24px; }

/* ============================================================
   VARIANT C — CINEMATIC IMAGE + NUMBERED ACCORDION
   ============================================================ */
.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;
}
.sv3-photo{ position:absolute; inset:0; z-index:0; }
.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);
}
.sv3-photo .ph.on{ opacity:1; transform:scale(1); }
.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%);
}
.sv3-rail{
  position:relative; z-index:3; grid-column:1; align-self:start;
  display:flex; flex-direction:column; gap:6px; padding:30px;
}
.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;
}
.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;
}
.sv3-tab:hover{ color:#fff; border-color:rgba(255,255,255,.3); }
.sv3-tab.active{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); }
.sv3-tab.active .t-n{ background:linear-gradient(135deg,var(--rose-600),var(--rose-400)); color:#fff; border-color:transparent; }

.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;
}
.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;
}
.sv3-title{ margin:22px 0 0; font-size:clamp(26px,2.8vw,36px); font-weight:500; letter-spacing:-.025em; line-height:1.05; }
.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; }
.sv3-acc{ margin-top:24px; border-top:1px solid rgba(255,255,255,.16); }
.sv3-arow{ border-bottom:1px solid rgba(255,255,255,.16); }
.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;
}
.sv3-arow-head .pm{ position:relative; width:16px; height:16px; flex:none; }
.sv3-arow-head .pm::before,.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;
}
.sv3-arow-head .pm::before{ width:16px; height:1.6px; }
.sv3-arow-head .pm::after{ width:1.6px; height:16px; }
.sv3-arow.open .pm::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.sv3-arow-body{
  overflow:hidden; max-height:0; transition:max-height .4s cubic-bezier(.2,.7,.2,1);
}
.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;
}
.sv3-cta-row{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.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;
}
.sv3-btn.solid{ background:#fff; color:var(--ink); }
.sv3-btn.solid svg{ width:16px; height:16px; }
.sv3-btn.solid:hover{ background:var(--rose-500); color:#fff; transform:translateY(-2px); }
.sv3-btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
.sv3-btn.ghost:hover{ border-color:#fff; transform:translateY(-2px); }
.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
   ============================================================ */
.sv4-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.sv4-head-hint{
  margin:0 0 6px; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--muted);
}
.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);
}
.sv4-rows{ margin-top:clamp(28px,4vw,46px); }
.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;
}
.sv4-row:last-child{ border-bottom:1px solid var(--line); }
.sv4-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--rose-500);
  transition:width .35s ease;
}
.sv4-row:hover::before,.sv4-row.open::before{ width:3px; }
.sv4-row-main{
  display:grid; grid-template-columns:minmax(0,360px) 1fr 264px;
  gap:clamp(24px,4vw,56px); align-items:center;
}
.sv4-row-l{ display:flex; align-items:flex-start; gap:18px; }
.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;
}
.sv4-row:hover .sv4-dot,.sv4-row.open .sv4-dot{ background:var(--rose-500); box-shadow:0 0 0 5px var(--rose-soft); }
.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; }
.sv4-row:hover .sv4-name{ color:var(--rose-600); }
.sv4-tag{ margin-top:12px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-600); }
.sv4-mid{ min-width:0; }
.sv4-overview{ margin:0; font-size:15.5px; line-height:1.62; font-weight:300; color:var(--ink-2); max-width:54ch; }
.sv4-thumb{
  position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  background:#0A0B0E; border:1px solid var(--line); text-decoration:none;
}
.sv4-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); filter:saturate(1.02); }
.sv4-row:hover .sv4-thumb img{ transform:scale(1.06); }
.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;
}
.sv4-thumb-cta svg{ width:13px; height:13px; }
.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 */
.sv4-subs{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.7,.2,1); }
.sv4-row:hover .sv4-subs,.sv4-row.open .sv4-subs{ max-height:280px; }
.sv4-subs-inner{ padding:24px 0 6px 28px; }
.sv4-subs-label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose-600); margin-bottom:12px;
}
.sv4-subs-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.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;
}
.sv4-subs-chips i:hover{ border-color:var(--rose-300); color:var(--ink); transform:translateY(-2px); }

/* ============================================================
   VARIANT E — SCROLL-STICKY INDEX
   ============================================================ */
.sv5-grid{
  margin-top:clamp(36px,5vw,60px);
  display:grid; grid-template-columns:268px 1fr; gap:clamp(30px,5vw,72px); align-items:start;
}
.sv5-rail{ position:sticky; top:40px; display:flex; flex-direction:column; gap:2px; }
.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);
}
.sv5-rail .sv5-tab:last-child{ border-bottom:1px solid var(--line); }
.sv5-tab-idx{ font-size:12.5px; font-weight:600; color:var(--faint); font-feature-settings:"tnum" 1; transition:color .3s ease; }
.sv5-tab-name{ font-size:17px; font-weight:500; letter-spacing:-.02em; color:var(--muted); transition:color .3s ease, transform .3s ease; }
.sv5-tab:hover{ padding-left:12px; }
.sv5-tab:hover .sv5-tab-name{ color:var(--ink-2); }
.sv5-tab.active{ padding-left:12px; }
.sv5-tab.active .sv5-tab-name{ color:var(--ink); transform:translateX(2px); }
.sv5-tab.active .sv5-tab-idx{ color:var(--rose-600); }
.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;
}
.sv5-tab.active .sv5-tab-bar{ transform:scaleY(1); }

.sv5-content{ display:flex; flex-direction:column; gap:clamp(48px,7vw,104px); }
.sv5-block{ scroll-margin-top:40px; }
.sv5-block-num{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--rose-600); font-feature-settings:"tnum" 1; }
.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); }
.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; }
.sv5-block-media{
  margin-top:26px; position:relative; aspect-ratio:21/8; border-radius:20px; overflow:hidden;
  background:#0A0B0E; border:1px solid var(--line);
}
.sv5-block-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.sv5-block:hover .sv5-block-media img{ transform:scale(1.04); }
.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); }
.sv5-subs{ margin:16px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.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;
}
.sv5-subs li:hover{ border-color:var(--rose-300); transform:translateY(-2px); background:var(--bg); }
.sv5-outcomes{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.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;
}
.sv5-cta-row{ margin-top:28px; }

/* ============================================================
   SHARED CLOSER — AI NOTE + RECOMMENDATION
   ============================================================ */
.svv-closer{ background:var(--bg); }
.ai-note{
  position:relative; border-radius:26px; overflow:hidden;
  background:#0A0B0E; border:1px solid #16181d; padding:clamp(34px,5vw,64px);
}
.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%);
}
.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%);
}
.ai-note-inner{ position:relative; z-index:2; max-width:64ch; color:#fff; }
.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);
}
.ai-note-badge svg{ width:17px; height:17px; }
.ai-note-h{ margin:22px 0 0; font-size:clamp(24px,2.6vw,34px); font-weight:500; letter-spacing:-.025em; line-height:1.08; }
.ai-note-p{ margin:16px 0 0; font-size:16px; line-height:1.62; font-weight:300; color:rgba(255,255,255,.84); }
.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; }
.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;
}
.ai-note-cta svg{ width:17px; height:17px; transition:transform .25s ease; }
.ai-note-cta:hover{ background:var(--rose-500); color:#fff; transform:translateY(-2px); }
.ai-note-cta:hover svg{ transform:translateX(3px); }

.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;
}
.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)); }
.svv-reco-h{ margin:0; font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.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; }
.svv-reco-actions{ display:flex; gap:12px; flex-wrap:wrap; flex:none; }
.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){
  .sv1-split{ grid-template-columns:1fr; }
  .sv1-visual{ min-height:340px; }
  .sv2-body{ grid-template-columns:1fr; gap:30px; }
  .sv2-side{ position:static; max-width:460px; }
  .sv3-stage{ grid-template-columns:1fr; min-height:auto; }
  .sv3-panel{ grid-column:1; justify-self:stretch; max-width:none; }
  .sv4-row-main{ grid-template-columns:1fr; gap:18px; }
  .sv4-thumb{ max-width:380px; }
  .sv4-subs-inner{ padding-left:0; }
  .sv5-grid{ grid-template-columns:1fr; }
  .sv5-rail{ position:static; flex-direction:row; flex-wrap:wrap; gap:0; }
  .sv5-tab{ flex:1 1 46%; border-top:1px solid var(--line); }
}
@media (max-width:560px){
  .sv1-subs{ grid-template-columns:1fr; }
  .sv5-subs{ grid-template-columns:1fr; }
  .sv3-rail{ flex-direction:row; flex-wrap:wrap; }
  .svv-reco-actions{ width:100%; }
  .svv-btn-dark,.svv-btn-ghost{ flex:1; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){

}

/* ============================================================
   WDI — Our Process · Sticky header + tall stacking gradient cards
   ============================================================ */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* shared header type */
.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);}
.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);}
.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;}
.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;}
.pr-sub{margin-top:18px;font-size:14.5px;line-height:1.6;font-weight:400;color:var(--muted);max-width:52ch;}
.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 */
.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;}
.pr-btn svg{width:16px;height:16px;transition:transform .25s;}
.pr-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(228,18,82,.28);}
.pr-btn:hover svg{transform:translateX(3px);}
.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;}
.pr-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
.pr-header-cta{margin-top:36px;}
.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);}
.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));}
.pr-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
.pr-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
.pr-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

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

/* === the card === */
.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;
}
.pra-card:nth-child(1){top:90px; background:#FFFFFF; color:var(--ink); border:1px solid var(--line);}
.pra-card:nth-child(2){top:120px;background:#FFE9F0; color:var(--ink);}
.pra-card:nth-child(3){top:150px;background:#FFC2D2; color:var(--ink);}
.pra-card:nth-child(4){top:180px;background:#F92F64; color:#fff;}
.pra-card:nth-child(5){top:210px;background:#6B0820; color:#fff;}
.pra-card:nth-child(6){top:240px;background:#0B0C0E; color:#fff;}

/* top chrome — number left, toggle right */
.pra-top{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;}
.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;
}
.pra-card:hover .pra-numchip{opacity:1;}
.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;
}
.pra-card:hover .pra-toggle{opacity:1;background:rgba(255,255,255,.06);}
.pra-card:nth-child(-n+3):hover .pra-toggle{background:rgba(0,0,0,.04);}
.pra-toggle svg{width:22px;height:22px;}
.pra-card.open .pra-toggle{transform:rotate(45deg);opacity:1;}

/* expand panel — slides into the blank space below the top chrome */
.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;
}
.pra-card.open .pra-detail{grid-template-rows:1fr;margin-top:40px;}
.pra-detail-inner{overflow:hidden;}
.pra-detail-body{max-width:60ch;}
.pra-detail-label{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:14px;}
.pra-detail-body p{font-size:16px;font-weight:400;line-height:1.6;opacity:.92;}
.pra-detail-body .aeo{margin-top:26px;padding-left:18px;border-left:3px solid var(--rose-500);}
.pra-card:nth-child(n+4) .pra-detail-body .aeo{border-left-color:var(--rose-300);}
.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 */
.pra-bottom{margin-top:auto;}
.pra-label{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:20px;}
.pra-title{
  font-size:clamp(34px,3.4vw,52px);
  font-weight:500;letter-spacing:-0.035em;line-height:1.02;
  text-wrap:balance;
}
.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){
  .pra-grid{grid-template-columns:1fr;gap:40px;}
  .pra-left{position:relative;top:0;}
}
@media(max-width:760px){
  .wrap{padding:0 22px;}
  .pra-sec{padding:70px 0 100px;}
  .pra-card{padding:36px 32px;min-height:520px;border-radius:28px;}
  .pra-numchip{width:42px;height:42px;font-size:14px;}
  .pra-toggle{width:46px;height:46px;}
  .pra-toggle svg{width:18px;height:18px;}
  .pra-title{font-size:34px;}
  .pr-cta{padding:26px;gap:20px;}
  .pr-cta-actions{width:100%;}
  .pr-cta .pr-btn,.pr-btn-ghost{flex:1;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  .pra-card,.pra-detail{transition:none;animation:none;}
}

/* ============================================================
   VARIANT TAG header (dev label)
   ============================================================ */
.pr-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
.pr-vtag b{color:var(--ink);font-weight:500;}
.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
   ============================================================ */
.prc-sec{position:relative;padding:100px 0 140px;border-top:1px solid var(--line);background:var(--bg-2);}
.prc-grid{display:block;}
.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;}
.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);}
.prc-body{min-width:0;}
.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;}
.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;}

.prc-cells{margin-top:72px;display:grid;grid-template-columns:repeat(6,1fr);column-gap:32px;row-gap:60px;}
.prc-cell{position:relative;min-height:220px;perspective:1400px;}
.prc-flip{position:relative;width:100%;height:100%;min-height:220px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.prc-cell:hover .prc-flip,.prc-cell:focus-within .prc-flip{transform:rotateY(180deg);}
.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;}
.prc-back{transform:rotateY(180deg);padding-left:20px;border-left:1px solid var(--rose-300);}

.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;}
.prc-cell:nth-child(odd) .prc-num{color:var(--rose-600);}
.prc-cell:nth-child(even) .prc-num{color:var(--rose-500);}
.prc-title-s{margin-top:28px;font-size:18px;font-weight:500;letter-spacing:-0.02em;color:var(--ink);line-height:1.18;}
.prc-desc-s{margin-top:12px;font-size:13px;font-weight:400;line-height:1.5;color:var(--muted);}

.prc-back-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-600);margin-bottom:14px;}
.prc-back-text{font-size:13px;font-weight:400;line-height:1.5;color:var(--ink-2);}
.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){
  .prc-cells{grid-template-columns:repeat(3,1fr);column-gap:28px;}
}
@media(max-width:760px){
  .prc-cells{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .prc-cells{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .prc-flip{transition:none;}
  .prc-cell:hover .prc-flip{transform:none;}
  .prc-back{display:none;}
}

/* ============================================================
   VARIANT C — Full-height step panels with photo on the right
   ============================================================ */
.prd-sec{position:relative;padding:100px 0 160px;border-top:1px solid var(--line);background:var(--bg-2);}
.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;}
.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;}
.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);}
.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;}
.prd-sub{font-size:clamp(15px,1.25vw,17.5px);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:62ch;}

.prd-stack{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:flex;flex-direction:column;gap:28px;}
.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);
}
.prd-card>*{position:relative;z-index:1;}
.prd-card:nth-child(1){top:60px;}
.prd-card:nth-child(2){top:88px;}
.prd-card:nth-child(3){top:116px;}
.prd-card:nth-child(4){top:144px;}
.prd-card:nth-child(5){top:172px;}
.prd-card:nth-child(6){top:200px;}

.prd-card.is-dark{background:#0E0F12;color:#fff;border-color:#1B1D22;}
.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 */
.prd-aura{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s ease;
}
.prd-aura span{position:absolute;border-radius:50%;filter:blur(90px);}
.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;
}
.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;
}
.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;
}
.prd-sec.show-aura .prd-aura{opacity:1;}
/* AI title — sub-second zap of pink + purple */
.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);}
}
.prd-card.is-dark .prd-label{color:var(--rose-300);}
.prd-card.is-dark .prd-title{color:#fff;}
.prd-card.is-dark .prd-desc{color:rgba(255,255,255,.78);}
.prd-card.is-dark .prd-li{color:#fff;}
.prd-card.is-dark .prd-aeo{color:rgba(255,255,255,.7);border-left-color:var(--rose-300);}
.prd-card.is-dark .prd-cta{background:#fff;color:var(--ink);}
.prd-card.is-dark .prd-cta:hover{background:var(--rose-500);color:#fff;}

.prd-left{padding:60px 56px;display:flex;flex-direction:column;justify-content:center;}
.prd-label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-600);margin-bottom:24px;}
.prd-label .sep{margin:0 10px;color:var(--rose-300);}
.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;}
.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;}
.prd-list{margin-top:32px;display:flex;flex-direction:column;gap:12px;}
.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);}
.prd-check{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid currentColor;color:var(--rose-600);opacity:.85;}
.prd-check svg{width:13px;height:13px;}
.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;}
.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;}
.prd-cta svg{width:16px;height:16px;transition:transform .25s;}
.prd-cta:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(228,18,82,.28);}
.prd-cta:hover svg{transform:translateX(3px);}

.prd-right{position:relative;background:#0c0d11;overflow:hidden;border-radius:0 36px 36px 0;}
.prd-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.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;}
.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){
  .prd-head{grid-template-columns:1fr;gap:24px;padding:0 22px;}
  .prd-stack{padding:0 22px;}
  .prd-card{grid-template-columns:1fr;min-height:0;}
  .prd-right{min-height:340px;}
  .prd-left{padding:40px 32px;}
}
@media(max-width:760px){
  .prd-sec{padding:70px 0 100px;}
  .prd-left{padding:32px 24px;}
}
@media(prefers-reduced-motion:reduce){
  .prd-card{transition:none;}
}

/* ============================================================
   WDI — Use Cases (light) — 3 variants + the WDI Spark mascot
   ============================================================ */
#wdi-wf-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;
}



.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* variant tag chrome (dev aid, shared) */
.uc-vtag { max-width: var(--maxw); margin: 0 auto; padding: 26px 40px 0; font-size: 13.5px; color: var(--muted); }
.uc-vtag b { color: var(--ink); font-weight: 500; }
.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 ---- */
.uc-sec { position: relative; padding: 100px 0 112px; background: var(--bg); border-top: 1px solid var(--line); }
.uc-sec.alt { background: var(--bg-2); }
.uc-head { max-width: 880px; }
.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); }
.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); }
.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; }
.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; }
.uc-seo { margin-top: 14px; font-size: 14.5px; line-height: 1.65; font-weight: 400; color: var(--muted); max-width: 74ch; }

/* ---- shared bits ---- */
.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; }
.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; }
.uc-btn-dark svg { width: 16px; height: 16px; transition: transform .25s ease; }
.uc-btn-dark:hover { background: var(--rose-600); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(228,18,82,.24); }
.uc-btn-dark:hover svg { transform: translateX(3px); }
.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; }
.uc-link svg { width: 15px; height: 15px; color: var(--rose-600); transition: transform .25s ease; }
.uc-link:hover { color: var(--rose-600); gap: 11px; }

/* ============================================================
   VARIATION A — BIG IMPACTFUL ALTERNATING FEATURE ROWS
   ============================================================ */
.uca-rows { margin-top: 64px; display: flex; flex-direction: column; gap: 30px; }
.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);
}
#usecases-a.in .uca-row { transform: none; transition-delay: var(--d); }
.uca-row.flip .uca-visual { order: 2; }

/* big abstract visual panel */
.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);
}
.uca-mesh { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.uca-row:hover .uca-mesh { transform: scale(1.06); }
.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%);
}
.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;
}
.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));
}
.uca-vico svg { width: 100%; height: 100%; }
.uca-vtags { position: absolute; left: 30px; right: 30px; bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.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); }
.uca-vtag-pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--rose-400); box-shadow: 0 0 8px var(--rose-400); }
.uca-vtag-pill.ghost { color: rgba(255,255,255,.78); }

/* content side */
.uca-content { min-width: 0; }
.uca-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-600); }
.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; }
.uca-scenario { margin-top: 16px; font-size: 16.5px; font-weight: 400; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.uca-steps { margin-top: 24px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
.uca-step { display: grid; grid-template-columns: 124px 1fr; gap: 22px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.uca-step-label { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.uca-step p { font-size: 14px; font-weight: 300; line-height: 1.58; color: var(--ink-2); }
.uca-step.is-out .uca-step-label { color: var(--rose-600); }
.uca-step.is-out p { color: var(--ink); font-weight: 400; }
.uca-services { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.uca-content .uc-btn-dark { margin-top: 24px; }

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

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

/* left sticky mascot panel */
.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);
}
#usecases-c.in .ucc-panel { transform: none; }
.ucc-spark { display: flex; justify-content: center; margin-bottom: 8px; }
.ucc-bubble { position: relative; }
.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; }
.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; }
.ucc-bubble-text { margin-top: 10px; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.ucc-bubble-out { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.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; }
.ucc-bubble-out p { font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--ink); }
.ucc-bubble-svc { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.ucc-bubble .uc-btn-dark { margin-top: 18px; width: 100%; justify-content: center; }
.ucc-bubble.pulse { animation: uccPulse .5s ease; }
@keyframes uccPulse { 0% { transform: translateY(6px); } 100% { transform: none; } }

/* right list */
.ucc-list { display: flex; flex-direction: column; gap: 12px; }
.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;
}
.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; }
.ucc-ico svg { width: 23px; height: 23px; }
.ucc-main { min-width: 0; display: block; }
.ucc-num { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--faint); text-transform: uppercase; }
.ucc-title2 { display: block; margin-top: 4px; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); line-height: 1.2; }
.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; }
.ucc-chev { width: 28px; height: 28px; display: grid; place-items: center; color: var(--faint); transition: transform .3s ease, color .3s ease; }
.ucc-chev svg { width: 17px; height: 17px; }
.ucc-row:hover { border-color: var(--rose-300); transform: translateX(2px); }
.ucc-row.active { border-color: var(--rose-300); box-shadow: 0 12px 34px rgba(11,12,14,.07); }
.ucc-row.active .ucc-ico { background: linear-gradient(135deg, var(--rose-600), var(--rose-400)); color: #fff; }
.ucc-row.active .ucc-scenario { max-height: 80px; opacity: 1; margin-top: 9px; }
.ucc-row.active .ucc-chev { color: var(--rose-600); transform: translateX(3px); }

/* ---- the Spark mascot ---- */
.spark { display: block; overflow: visible; }
.spark-shadow { fill: rgba(11,12,14,.10); }
.spark-aura { animation: sparkAura 4s ease-in-out infinite; transform-origin: 70px 68px; }
@keyframes sparkAura { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.spark-visor { fill: #1a0a12; }
.spark-pupil { fill: #FF6F92; }
.spark-pupil-hi { fill: #fff; }
.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) ---- */
.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); }
.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); }
.uc-cta-h { font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.uc-cta-p { margin-top: 10px; font-size: 15px; line-height: 1.55; font-weight: 300; color: var(--ink-2); max-width: 60ch; }
.uc-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
.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; }
.uc-cta-secondary:hover { border-color: var(--rose-300); transform: translateY(-2px); }

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



.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; }

/* ============================================================
   SECTION SHELL — full-bleed dark canvas
   ============================================================ */
.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 */
#chalDots {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* ambient drifting orbs */
.chal-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.chal-amb span {
  position: absolute; border-radius: 50%; filter: blur(70px);
}
.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; }
.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; }
.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 */
.chal-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.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)
   ============================================================ */
.chal-head { max-width: 880px; }
.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);
}
.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);
}
.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;
}
.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;
}
.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
   ============================================================ */
.chal-grid {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.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;
}
.chal.in .chal-card { transform: none; transition-delay: var(--d, 0s); }

/* gradient edge glow on hover */
.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 */
.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;
}
.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);
}
.chal.in .chal-card:hover { transform: translateY(-4px); }
.chal-card:hover::before { opacity: 1; }
.chal-card:hover::after { opacity: 1; }

.chal-card-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.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;
}
.chal-ico svg { width: 25px; height: 25px; }
.chal-card:hover .chal-ico { background: linear-gradient(135deg, var(--rose-500), var(--rose-400)); color: #fff; transform: scale(1.06); }
.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;
}
.chal-card:hover .chal-num { color: rgba(255,255,255,.5); }

.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;
}
.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);
}
.chal-symp {
  position: relative; z-index: 2;
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px;
}
.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;
}
.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;
}
.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;
}
.chal-open .ar svg { width: 14px; height: 14px; }
.chal-card:hover .chal-open .ar { transform: translateX(3px) scale(1.06); }

/* AI card — ambient conic aura */
.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); } }
.chal-card.is-ai:hover .ai-aura { opacity: .34; }
.chal-card.is-ai .chal-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); color: #fff; }

/* ============================================================
   EXPAND OVERLAY (the "diagnosis")
   ============================================================ */
.chal-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: none;
  align-items: center; justify-content: center;
  padding: 28px;
}
.chal-overlay.open { display: flex; }
.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;
}
.chal-overlay.show .chal-backdrop { opacity: 1; }

.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;
}
.chal-overlay.show .chal-modal { transform: none; opacity: 1; }
.chal-modal::-webkit-scrollbar { width: 10px; }
.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 */
.chal-modal-head {
  position: relative;
  padding: 38px 44px 30px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.chal-modal-mesh {
  position: absolute; inset: 0; z-index: 0; opacity: .9;
}
.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%);
}
.chal-modal-head-row { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; }
.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);
}
.chal-modal-ico svg { width: 27px; height: 27px; }
.chal-modal.is-ai .chal-modal-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); }
.chal-modal-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-300); }
.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; }
.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;
}

.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;
}
.chal-close:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); color: #fff; }
.chal-close svg { width: 18px; height: 18px; }

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

.chal-blocks {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.chal-block {
  border-radius: 16px; padding: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
}
.chal-block.span2 { grid-column: span 2; }
.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);
}
.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;
}
.chal-block-label .dot { width: 6px; height: 6px; border-radius: 50%; }
.chal-block.is-symp .chal-block-label { color: #FFB37A; }
.chal-block.is-symp .dot { background: #FF9A52; box-shadow: 0 0 8px rgba(255,154,82,.7); }
.chal-block.is-impact .chal-block-label { color: #FF7A9C; }
.chal-block.is-impact .dot { background: var(--rose-400); box-shadow: 0 0 8px rgba(249,47,100,.7); }
.chal-block.is-help .chal-block-label { color: #fff; }
.chal-block.is-help .dot { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8); }
.chal-block-text { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.82); }
.chal-block.is-help .chal-block-text { color: rgba(255,255,255,.92); font-weight: 400; }

/* relevant services */
.chal-services { margin-top: 26px; }
.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; }
.chal-svc-list { display: flex; flex-wrap: wrap; gap: 9px; }
.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;
}
.chal-svc:hover { border-color: var(--rose-300); background: rgba(249,47,100,.14); transform: translateY(-2px); }

.chal-modal-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.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;
}
.chal-modal-btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.chal-modal-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,255,255,.18); }
.chal-modal-btn:hover svg { transform: translateX(3px); }

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

/* ============================================================
   SECTION CTA
   ============================================================ */
.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;
}
.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);
}
.chal-cta-h { font-size: clamp(21px, 2.1vw, 27px); font-weight: 500; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.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; }
.chal-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
.chal-cta-primary, .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;
}
.chal-cta-primary { color: #0B0C0E; background: #fff; border: 1px solid #fff; }
.chal-cta-primary svg { width: 17px; height: 17px; transition: transform .25s ease; }
.chal-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,255,255,.22); }
.chal-cta-primary:hover svg { transform: translateX(3px); }
.chal-cta-secondary { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.26); }
.chal-cta-secondary:hover { border-color: var(--rose-300); background: rgba(249,47,100,.12); transform: translateY(-2px); }

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

/* ============================================================
   VARIANT LABEL (page scaffolding only)
   ============================================================ */
.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);
}
.chal-vtag b { color: #fff; font-weight: 600; }
.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
   ============================================================ */
.cb-railwrap { position: relative; z-index: 2; margin-top: 50px; }
.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;
}
.cb-rail::-webkit-scrollbar { display: none; }

.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;
}
.cb-poster { position: absolute; inset: 0; z-index: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.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%);
}
.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)); }
.cb-watermark { position: absolute; top: 22px; right: 18px; z-index: 2; width: 86px; height: 86px; color: rgba(255,255,255,.12); }
.cb-watermark svg { width: 100%; height: 100%; }

.cb-top { position: absolute; top: 24px; left: 26px; z-index: 4; display: flex; align-items: center; gap: 12px; }
.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; }
.cb-ico svg { width: 22px; height: 22px; }
.cb-card.is-ai .cb-ico { background: linear-gradient(135deg, #F92F64, #7A00FF); }
.cb-num { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); font-feature-settings: "tnum" 1; }

.cb-body { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 4; }
.cb-title { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; color: #fff; text-wrap: balance; }
.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) */
.cb-preview {
  margin-top: 0; max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.2,.7,.2,1), margin-top .5s ease;
}
.cb-preview-inner { padding-top: 16px; }
.cb-preview-label { font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #FFB37A; margin-bottom: 9px; display: block; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.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; }
.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;
}
.cb-open svg { width: 15px; height: 15px; }

.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);
}
.cb-card:hover .cb-poster { transform: scale(1.08); }
.cb-card:hover .cb-preview { max-height: 220px; }
.cb-card:hover .cb-hook { -webkit-line-clamp: 3; }

/* rail arrows */
.cb-arrows { position: absolute; top: -64px; right: 40px; display: flex; gap: 10px; z-index: 5; }
.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;
}
.cb-arrow:hover { background: rgba(255,255,255,.16); border-color: var(--rose-300); }
.cb-arrow:active { transform: scale(.94); }
.cb-arrow svg { width: 19px; height: 19px; }
.cb-arrow[disabled] { opacity: .3; cursor: default; pointer-events: none; }

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

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

/* left editorial */
.cc-left { padding: 56px 52px; display: flex; flex-direction: column; }
.cc-eyebrow-row { display: flex; align-items: center; gap: 14px; }
.cc-bignum { font-size: 15px; font-weight: 600; color: var(--rose-300); font-feature-settings: "tnum" 1; letter-spacing: 0.04em; }
.cc-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.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; }
.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; }
.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; }
.cc-services { margin-top: auto; padding-top: 26px; }
.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; }
.cc-svc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.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; }
.cc-svc:hover { border-color: var(--rose-300); background: rgba(249,47,100,.14); transform: translateY(-2px); }
.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; }
.cc-cta svg { width: 16px; height: 16px; transition: transform .25s ease; }
.cc-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,255,255,.2); }
.cc-cta:hover svg { transform: translateX(3px); }

/* right visual stage */
.cc-right { position: relative; overflow: hidden; background: #08090C; }
.cc-mesh { position: absolute; inset: 0; z-index: 0; transition: transform .9s ease; }
.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%); }
.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)); }
.cc-bigicon svg { width: 100%; height: 100%; }
.cc-floats { position: absolute; left: 38px; right: 38px; bottom: 38px; z-index: 3; display: flex; flex-direction: column; gap: 14px; }
.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);
}
.cc-slide.active .cc-float { transform: none; }
.cc-slide.active .cc-float.f2 { transition-delay: .1s; }
.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; }
.cc-float-label .dot { width: 6px; height: 6px; border-radius: 50%; }
.cc-float.is-symp .cc-float-label { color: #FFB37A; } .cc-float.is-symp .dot { background: #FF9A52; box-shadow: 0 0 8px rgba(255,154,82,.7); }
.cc-float.is-help .cc-float-label { color: #fff; } .cc-float.is-help .dot { background: var(--rose-400); box-shadow: 0 0 8px rgba(249,47,100,.8); }
.cc-float-text { font-size: 13.5px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.85); }
.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); }
.cc-right.is-ai .cc-bigicon { color: #fff; }

/* controls */
.cc-controls { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cc-dots { display: flex; gap: 9px; }
.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; }
.cc-dot.active { width: 30px; border-radius: 999px; background: linear-gradient(90deg, var(--rose-500), var(--rose-400)); }
.cc-nav { display: flex; gap: 10px; }
.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; }
.cc-arrow:hover { background: rgba(255,255,255,.16); border-color: var(--rose-300); }
.cc-arrow:active { transform: scale(.94); }
.cc-arrow svg { width: 19px; height: 19px; }

/* autoplay progress */
.cc-progress { position: relative; height: 2px; margin-top: 20px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.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); }
.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) {
  .cc-inner { grid-template-columns: 1fr; }
  .cc-right { min-height: 320px; order: -1; }
  .cc-left { padding: 36px 30px; }
  .cc-floats { position: static; margin-top: 0; padding: 24px 30px 30px; }
  .cc-bigicon { width: 56px; height: 56px; top: 24px; right: 24px; }
}
@media (max-width: 760px) {
  .cb-card { flex-basis: 78vw; height: 420px; }
  .cb-arrows { display: none; }
  .cc-controls { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .cc-nav { justify-content: center; }
  .cc-dots { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-track { transition: none; }
  .cc-float { transform: none; }
  .cc-progress-fill.run { animation: none; transform: scaleX(1); }
  .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.
   ============================================================ */
.chal-light {
  position: relative;
  padding: 104px 0 116px;
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.chal-light .chal-head { max-width: 880px; }
.chal-light .chal-eyebrow { color: var(--rose-600); }
.chal-light .chal-eyebrow::before { box-shadow: 0 0 10px rgba(249,47,100,.5); }
.chal-light .chal-h { color: var(--ink); }
.chal-light .chal-intro { color: var(--ink-2); }
.chal-light .chal-seo { color: var(--muted); }

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

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

/* ---- left: numbered index ---- */
.cd-nav { display: flex; flex-direction: column; justify-content: center; }
.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);
}
.cd-item:last-child { border-bottom: none; }
.cd-item-num {
  font-size: 13px; font-weight: 600; color: var(--faint);
  font-feature-settings: "tnum" 1; transition: color .35s ease;
}
.cd-item-title {
  font-size: 18px; font-weight: 500; letter-spacing: -0.018em;
  color: var(--muted); line-height: 1.25; transition: color .35s ease;
}
.cd-item-sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1);
}
.cd-item-sub > span {
  overflow: hidden;
  font-size: 13.5px; font-weight: 300; line-height: 1.45; color: var(--muted);
}
.cd-item:hover .cd-item-title { color: var(--ink-2); }
.cd-item.active { background: var(--bg-2); }
.cd-item.active .cd-item-num { color: var(--rose-600); }
.cd-item.active .cd-item-title { color: var(--ink); }
.cd-item.active .cd-item-sub { grid-template-rows: 1fr; margin-top: 8px; }
.cd-item.active .cd-item-sub > span { color: var(--ink-2); }
/* active accent bar */
.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);
}
.cd-item.active::before { transform: translateY(-50%) scaleY(1); }
.cd-item.active.is-ai::before { background: linear-gradient(180deg, var(--rose-500), #7A00FF); }

/* ---- right: detail panel (calm editorial spec sheet) ---- */
.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 */
.cd-stage-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cd-stage-meta { display: flex; align-items: center; gap: 13px; }
.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);
}
.cd-stage-ico svg { width: 23px; height: 23px; }
.cd-stage-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-600); }
.cd-stage-num {
  font-size: 58px; font-weight: 300; line-height: .85; letter-spacing: -0.045em;
  color: #E3E5E9; font-feature-settings: "tnum" 1;
}

.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;
}
.cd-stage-lead { margin-top: 16px; font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.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 */
.cd-spec { margin-top: 30px; border-top: 1px solid var(--line); }
.cd-spec-row {
  display: grid; grid-template-columns: 152px 1fr; gap: 28px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.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);
}
.cd-spec-label .tick { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex: none; }
.cd-spec-row.is-help .cd-spec-label { color: var(--rose-600); }
.cd-spec-row.is-help .cd-spec-label .tick { background: var(--rose-500); box-shadow: 0 0 0 3px var(--rose-soft); }
.cd-spec-text { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.cd-spec-row.is-help .cd-spec-text { color: var(--ink); font-weight: 400; }

/* footer: services + cta */
.cd-stage-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.cd-stage-services { min-width: 0; }
.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; }
.cd-svc-list { display: flex; flex-wrap: wrap; gap: 9px; }
.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; }
.cd-svc:hover { border-color: var(--rose-300); color: var(--ink); background: #fff; transform: translateY(-2px); }
.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; }
.cd-cta svg { width: 16px; height: 16px; transition: transform .25s ease; }
.cd-cta:hover { background: var(--rose-600); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(228,18,82,.24); }
.cd-cta:hover svg { transform: translateX(3px); }

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

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

/* ============================================================
   WDI — Solution Approach  (redesigned: Timeline + Radar Stage)
   ============================================================ */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* dev variant label */
.sa-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
.sa-vtag b{color:var(--ink);font-weight:500;}
.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 */
.sa-sec{position:relative;padding:104px 0 118px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
.sa-sec.alt{background:var(--bg-2);}

/* shared header */
.sa-head{max-width:840px;position:relative;z-index:2;}
.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);}
.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);}
.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;}
.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;}
.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 */
.sa-pills{display:flex;flex-wrap:wrap;gap:8px;}
.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;}
.sa-pill:hover{border-color:var(--rose-300);color:var(--ink);transform:translateY(-2px);}

/* shared buttons */
.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;}
.sa-btn svg{width:16px;height:16px;transition:transform .25s;}
.sa-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
.sa-btn:hover svg{transform:translateX(3px);}
.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;}
.sa-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

/* shared section CTA */
.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);}
.sa-sec.alt .sa-cta{background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.07),transparent 58%),var(--bg);}
.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));}
.sa-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
.sa-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:58ch;}
.sa-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

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

/* the drawn thread */
.sat-track{position:absolute;left:21px;top:8px;bottom:8px;width:2px;background:var(--line);overflow:hidden;border-radius:2px;}
.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;}
#solution-a.in .sat-track-fill{animation:satDraw 2.4s cubic-bezier(.4,0,.1,1) forwards;}
@keyframes satDraw{to{transform:scaleY(1);}}

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

/* node */
.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;
}
.sa-sec.alt .sat-node{background:var(--bg-2);}
.sat-node::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background .4s,transform .4s;}
#solution-a.in .sat-step .sat-node{border-color:var(--rose-400);box-shadow:0 0 0 5px rgba(249,47,100,.08);}
#solution-a.in .sat-step .sat-node::after{background:linear-gradient(135deg,var(--rose-600),var(--rose-400));transform:scale(1.15);}

/* head row */
.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);}
.sat-kicker .n{color:var(--faint);font-feature-settings:"tnum" 1;}
.sat-kicker .bar{flex:none;width:18px;height:1px;background:var(--rose-300);}
.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;}
.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);}
#solution-a.in .sat-step .sat-title::after{transform:scaleX(1);transition-delay:calc(var(--d) + .25s);}
.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 */
.sat-approach{margin-top:14px;font-size:14.5px;font-weight:300;line-height:1.62;color:var(--ink-2);max-width:66ch;}
.sat-grid{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:760px;}
.sat-col{padding-top:14px;border-top:1px solid var(--line);}
.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;}
.sat-col-label::before{content:"";width:6px;height:6px;border-radius:50%;}
.sat-col.is-prob .sat-col-label{color:#C2691B;}.sat-col.is-prob .sat-col-label::before{background:#E8821E;}
.sat-col.is-why .sat-col-label{color:#5A1FD4;}.sat-col.is-why .sat-col-label::before{background:var(--violet);}
.sat-col p{font-size:13.5px;font-weight:300;line-height:1.58;color:var(--ink-2);}
.sat-col.is-why p{color:var(--ink);font-weight:400;}

.sat-foot{margin-top:24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.sat-services{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sat-services .lbl{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}
.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;}
.sat-link svg{width:15px;height:15px;color:var(--rose-600);transition:transform .25s;}
.sat-link:hover{color:var(--rose-600);gap:11px;}
.sat-link:hover svg{transform:translateX(3px);}

/* ============================================================
   VARIANT B — RADAR FOCUS STAGE (auto-advancing)
   ============================================================ */
.sar-wrap{margin-top:60px;position:relative;z-index:2;}
.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);
}
#solution-b.in .sar-stage{animation:sarRise .9s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes sarRise{to{transform:none;}}

/* left: editorial */
.sar-left{padding:48px 46px;display:flex;flex-direction:column;min-height:520px;}
.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);}
.sar-kicker .n{color:var(--faint);font-feature-settings:"tnum" 1;}
.sar-kicker .bar{width:18px;height:1px;background:var(--rose-300);}
.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;}
.sar-lead{margin-top:16px;font-size:16px;font-weight:400;line-height:1.5;color:var(--ink);max-width:46ch;}
.sar-rows{margin-top:24px;display:flex;flex-direction:column;}
.sar-row{padding:16px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start;}
.sar-row:last-child{border-bottom:1px solid var(--line);}
.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;}
.sar-row-label::before{content:"";width:6px;height:6px;border-radius:50%;}
.sar-row.is-prob .sar-row-label{color:#C2691B;}.sar-row.is-prob .sar-row-label::before{background:#E8821E;}
.sar-row.is-appr .sar-row-label{color:var(--rose-600);}.sar-row.is-appr .sar-row-label::before{background:var(--rose-500);}
.sar-row.is-why .sar-row-label{color:#5A1FD4;}.sar-row.is-why .sar-row-label::before{background:var(--violet);}
.sar-row p{font-size:13.5px;font-weight:300;line-height:1.55;color:var(--ink-2);}
.sar-row.is-why p{color:var(--ink);font-weight:400;}
.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) */
.sar-fx{transform:translateY(12px);filter:blur(7px);}
.sar-fx.show{transform:none;filter:blur(0);transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .55s ease;}
.sar-lead.show{transition-delay:.05s;}
.sar-rows.show{transition-delay:.10s;}
.sar-foot.show{transition-delay:.16s;}

/* right: light radar visual */
.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;}
.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;}
.sar-radar{position:relative;width:78%;max-width:340px;aspect-ratio:1;}
.sar-radar svg{width:100%;height:100%;overflow:visible;}
.sar-ring{fill:none;stroke:var(--line-2);stroke-width:1;}
.sar-ring.r2{stroke:var(--line);}
.sar-ring.r3{stroke:var(--line-2);}
.sar-cross{stroke:var(--line);stroke-width:1;}
/* thin rotating beam + soft trail */
.sar-beam{transform-origin:200px 200px;animation:sarSweep 5s linear infinite;}
@keyframes sarSweep{to{transform:rotate(360deg);}}
/* orbiting satellite (counter-rotating, slower) */
.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 */
.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;}}
.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);}}
.sar-node-dot{fill:var(--rose-500);}
.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;}}
.sar-core{filter:drop-shadow(0 8px 22px rgba(228,18,82,.26));}
.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);}}
.sar-core-disc{fill:url(#sarCore);}
.sar-ico{color:#fff;}
.sar-ico svg{width:30px;height:30px;}
.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 */
.sar-tabs{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap;}
.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;}
.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;}
.sar-tab span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;}
.sar-tab .tn{font-size:11px;color:var(--faint);font-feature-settings:"tnum" 1;transition:color .3s;}
.sar-tab:hover{color:var(--ink);border-color:var(--line-2);}
.sar-tab.active{color:var(--ink);border-color:var(--rose-300);}
.sar-tab.active .tn{color:var(--rose-600);}
.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)
   ============================================================ */
.sas-wrap{margin-top:54px;position:relative;z-index:2;}

/* the stepper rail */
.sas-rail{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--line);}
.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;
}
.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);
}
.sas-dot svg{width:19px;height:19px;}
.sas-steptext{min-width:0;}
.sas-stepkw{display:block;font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--muted);transition:color .35s;line-height:1.2;}
.sas-stepsub{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--faint);transition:color .35s;}
.sas-step:hover .sas-stepkw{color:var(--ink-2);}
.sas-step:hover .sas-dot{border-color:var(--rose-300);}
.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);}
.sas-step.active .sas-stepkw{color:var(--ink);}
.sas-step.active .sas-stepsub{color:var(--rose-600);}
/* sliding active indicator */
.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 */
.sas-deck{margin-top:38px;display:grid;grid-template-columns:1.15fr 1fr;gap:46px;align-items:start;}
.sas-left{min-width:0;}
.sas-eyrow{display:flex;align-items:center;gap:12px;}
.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;}
.sas-count{font-size:12.5px;font-weight:500;color:var(--faint);font-feature-settings:"tnum" 1;}
.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;}
.sas-lead{margin-top:16px;font-size:16.5px;font-weight:400;line-height:1.5;color:var(--ink);max-width:48ch;}
.sas-approach{margin-top:13px;font-size:14.5px;font-weight:300;line-height:1.62;color:var(--ink-2);max-width:54ch;}
.sas-pills{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;}
.sas-foot{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}

/* right: stacked problem / why cards with number watermark */
.sas-right{position:relative;display:flex;flex-direction:column;gap:14px;padding-top:6px;}
.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;}
.sas-card{position:relative;z-index:1;border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:var(--bg);overflow:hidden;}
.sas-card.is-prob{border-left:3px solid #E8821E;}
.sas-card.is-why{border-left:3px solid var(--violet);background:linear-gradient(140deg,rgba(249,47,100,.05),rgba(122,0,255,.04));}
.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;}
.sas-card-label::before{content:"";width:6px;height:6px;border-radius:50%;}
.sas-card.is-prob .sas-card-label{color:#C2691B;}.sas-card.is-prob .sas-card-label::before{background:#E8821E;}
.sas-card.is-why .sas-card-label{color:#5A1FD4;}.sas-card.is-why .sas-card-label::before{background:var(--violet);}
.sas-card-text{font-size:13.8px;font-weight:300;line-height:1.58;color:var(--ink-2);}
.sas-card.is-why .sas-card-text{color:var(--ink);font-weight:400;}

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

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

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

/* slim numeric index */
.sad-index{display:flex;align-items:center;gap:0;margin-bottom:60px;border-top:1px solid var(--line);}
.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;
}
.sad-tick::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:transparent;transition:background .4s;}
.sad-tick .tn{font-size:12px;font-weight:600;font-feature-settings:"tnum" 1;letter-spacing:.04em;}
.sad-tick .tk{font-size:13px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap;}
.sad-tick:hover{color:var(--ink-2);}
.sad-tick.active{color:var(--ink);}
.sad-tick.active::before{background:linear-gradient(90deg,var(--rose-600),var(--rose-400));}
.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 */
.sad-stage{position:relative;max-width:1000px;}
.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;}
.sad-eyrow{display:flex;align-items:center;gap:12px;}
.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);}
.sad-kw{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-600);}
.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;}
.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 */
.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;}
.sad-col .lbl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:11px;}
.sad-col.is-appr .lbl{color:var(--rose-600);}
.sad-col.is-prob .lbl{color:#C2691B;}
.sad-col.is-why .lbl{color:#5A1FD4;}
.sad-col p{font-size:13.8px;font-weight:300;line-height:1.62;color:var(--ink-2);}
.sad-col.is-appr p{color:var(--ink);font-weight:400;}

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

/* nav controls */
.sad-nav{display:flex;align-items:center;gap:10px;margin-left:auto;}
.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;}
.sad-arrow svg{width:18px;height:18px;}
.sad-arrow:hover{border-color:var(--rose-300);color:var(--rose-600);transform:translateY(-2px);}

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

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

/* WDI — Technologies & Integrations · 3 variants */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

.te-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
.te-vtag b{color:var(--ink);font-weight:500;}
.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;}

.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);}
.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);}
.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;}
.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;}

.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;}
.te-btn svg{width:16px;height:16px;transition:transform .25s;}
.te-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(228,18,82,.28);}
.te-btn:hover svg{transform:translateX(3px);}
.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;}
.te-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

.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);}
.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));}
.te-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
.te-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
.te-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

/* ============================================================
   VARIANT A — Compact · CTA left, 3 marquee rows right
   ============================================================ */
.tea-sec{padding:90px 0 110px;background:var(--bg);border-top:1px solid var(--line);}
.tea-grid{display:grid;grid-template-columns:0.6fr 1fr;gap:60px;align-items:center;}
.tea-left .te-h{font-size:clamp(28px,2.8vw,38px);}
.tea-left .te-sub{margin-top:16px;max-width:38ch;font-size:15px;}
.tea-left .te-btn{margin-top:24px;}
.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);}
.tea-row{overflow:hidden;}
.tea-track{display:inline-flex;gap:14px;animation:marqR 36s linear infinite;will-change:transform;}
.tea-row:hover .tea-track{animation-play-state:paused;}
.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);}}
.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;}
.tea-pill:hover{border-color:var(--rose-300);transform:translateY(-2px);box-shadow:0 8px 22px rgba(249,47,100,.10);color:var(--ink);}
.tea-pill img{width:22px;height:22px;object-fit:contain;}

/* ============================================================
   VARIANT B — Detailed Linear-style with category tabs + grid
   ============================================================ */
.teb-sec{padding:100px 0 130px;background:#0A0B0E;color:#fff;border-top:1px solid var(--line);position:relative;overflow:hidden;}
.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;}
.teb-head{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto 50px;}
.teb-head .te-eyebrow{color:var(--rose-300);}
.teb-head .te-h{color:#fff;}
.teb-head .te-sub{color:rgba(255,255,255,.7);margin-left:auto;margin-right:auto;}

.teb-tabs-wrap{position:relative;z-index:2;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:48px;}
.teb-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 2px;}
.teb-tabs::-webkit-scrollbar{display:none;}
.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;}
.teb-tab:hover{color:rgba(255,255,255,.85);}
.teb-tab.active{color:#fff;border-bottom-color:var(--rose-400);}
.teb-tab svg{width:18px;height:18px;}
.teb-tab .ico{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.06);}
.teb-tab.active .ico{background:linear-gradient(135deg,var(--rose-600),var(--rose-400));color:#fff;}

.teb-cathead{position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px;}
.teb-cattitle{font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-0.03em;color:#fff;}
.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;}
.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;}

.teb-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.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;}
.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);}
.teb-card .row{display:flex;align-items:center;gap:14px;}
.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;}
.teb-card .logo img{width:28px;height:28px;object-fit:contain;}
.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;}
.teb-card.featured .logo::after{display:block;}
.teb-card h4{font-size:17px;font-weight:500;letter-spacing:-0.015em;color:#fff;}
.teb-card p{font-size:13.5px;font-weight:400;line-height:1.5;color:rgba(255,255,255,.62);}
/* scroll reveal */
.teb-card{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),border-color .35s,background .35s;}
.teb-sec.in .teb-card{opacity:1;transform:none;}
.teb-sec.in .teb-card{transition-delay:var(--d,0s);}

/* ============================================================
   VARIANT C — Creative · constellation + ambient AI glow
   ============================================================ */
.tec-sec{position:relative;padding:120px 0 140px;background:var(--bg-2);border-top:1px solid var(--line);overflow:hidden;}
.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;}
.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;}
.tec-head{text-align:center;max-width:740px;margin:0 auto 60px;position:relative;z-index:3;}
.tec-stage{position:relative;height:600px;margin:0 auto;max-width:760px;z-index:2;}
.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;}
.tec-core span{background:linear-gradient(120deg,var(--rose-500),var(--rose-300),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
.tec-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(11,12,14,.10);transform:translate(-50%,-50%);}
.tec-r1{width:280px;height:280px;animation:tecSpin 36s linear infinite;}
.tec-r2{width:480px;height:480px;animation:tecSpin 60s linear infinite reverse;}
.tec-r3{width:680px;height:680px;animation:tecSpin 90s linear infinite;}
@keyframes tecSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.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;}
.tec-r2 .tec-dot{animation:tecCounter2 60s linear infinite;}
.tec-r3 .tec-dot{animation:tecCounter3 90s linear infinite;}
.tec-dot:hover{transform:scale(1.15);border-color:var(--rose-300);box-shadow:0 18px 40px rgba(249,47,100,.20);}
.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){
  .tea-grid{grid-template-columns:1fr;}
  .teb-grid{grid-template-columns:repeat(2,1fr);}
  .tec-stage{height:480px;}
  .tec-r1{width:220px;height:220px;}
  .tec-r2{width:360px;height:360px;}
  .tec-r3{width:520px;height:520px;}
}
@media(max-width:700px){
  .wrap{padding:0 22px;}
  .teb-grid{grid-template-columns:1fr;}
  .te-cta{padding:26px;gap:20px;}
  .te-cta-actions{width:100%;}
  .te-cta .te-btn,.te-btn-ghost{flex:1;justify-content:center;}
  .tec-stage{height:380px;}
  .tec-r2{width:300px;height:300px;}
  .tec-r3{width:380px;height:380px;}
  .tec-dot{width:40px;height:40px;margin:-20px 0 0 -20px;}
  .tec-dot img{width:22px;height:22px;}
}
@media(prefers-reduced-motion:reduce){
  .tea-track,.tec-r1,.tec-r2,.tec-r3,.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-wf-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;
}



:where(#wdi-wf-page) a{ color:inherit; text-decoration:none; }
:where(#wdi-wf-page) img{ display:block; max-width:100%; }

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

/* ---- variant label strip ---- */
.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); }
.ivv-vtag b{ color:var(--ink); font-weight:600; }
.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 ---- */
.ivv-sec{ position:relative; padding:clamp(64px,8vw,108px) 0; border-top:1px solid var(--line); }
.ivv-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); position:relative; z-index:2; }

.ivv-head{ max-width:900px; }
.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); }
.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); }
.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; }
.ivv-answer,.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 */
.ivv-btn-dark,.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; }
.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); }
.ivv-btn-dark svg{ width:17px; height:17px; transition:transform .25s; }
.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); }
.ivv-btn-dark:hover svg{ transform:translateX(3px); }
.ivv-btn-ghost{ color:var(--ink); background:transparent; border:1px solid var(--line-2); }
.ivv-btn-ghost:hover{ border-color:var(--rose-300); transform:translateY(-2px); }

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

/* ============================================================
   VARIANT A — SCROLL-REVEAL EDITORIAL INDEX
   ============================================================ */
.iv1-list{ margin-top:clamp(34px,5vw,58px); }
.iv1-row{ position:relative; border-top:1px solid var(--line); padding:clamp(22px,3vw,38px) 0; cursor:pointer; overflow:hidden; }
.iv1-list .iv1-row:last-child{ border-bottom:1px solid var(--line); }
.iv1-row-head{ display:flex; align-items:baseline; gap:clamp(16px,3vw,34px); }
/* big faint index numeral — fades in on the active row */
.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); }
.iv1-row.active .iv1-ghost{ opacity:.55; transform:translateY(-50%) scale(1); }
.iv1-row-head{ display:flex; align-items:baseline; gap:clamp(16px,3vw,34px); }
.iv1-idx{ flex:none; width:42px; font-size:14px; font-weight:600; color:var(--faint); font-feature-settings:"tnum" 1; transition:color .4s; }
.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); }
.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); }
.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; }
.iv1-row.active .iv1-idx{ color:var(--rose-600); }
.iv1-row.active .iv1-name{ color:var(--ink); }
.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; }
.iv1-row.active .iv1-name{ transform:translateX(2px); }
.iv1-row.active .iv1-name::after{ transform:scaleX(1); }
.iv1-row.active .iv1-short{ opacity:1; transform:none; color:var(--muted); }
.iv1-row:hover .iv1-name{ color:var(--ink-2); }
.iv1-row.active:hover .iv1-name{ color:var(--ink); }

.iv1-detail{ overflow:hidden; max-height:0; opacity:0; transition:max-height .6s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.iv1-row.active .iv1-detail{ max-height:460px; opacity:1; }
.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; }
.iv1-long{ margin:0; font-size:16px; line-height:1.62; font-weight:300; color:var(--ink-2); max-width:56ch; }
.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; }
.iv1-cta{ margin-top:22px; }
.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; }
.iv1-subs{ display:flex; flex-direction:column; gap:0; }
.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); }
.iv1-subs span:first-child{ border-top:none; }

/* ---- VARIANT A · DARK ---- */
.iv1--dark{ background:#08090C; border-top:1px solid #16181d; color:#fff; overflow:hidden; }
.iv1--dark .ivv-h{ color:#fff; }
.iv1--dark .ivv-answer{ color:rgba(255,255,255,.66); }
.iv1--dark .iv1-row{ border-top-color:rgba(255,255,255,.10); }
.iv1--dark .iv1-list .iv1-row:last-child{ border-bottom-color:rgba(255,255,255,.10); }
.iv1--dark .iv1-idx{ color:rgba(255,255,255,.34); }
.iv1--dark .iv1-name{ color:rgba(255,255,255,.30); }
.iv1--dark .iv1-row.active .iv1-name{ color:#fff; }
.iv1--dark .iv1-row.active .iv1-idx{ color:var(--rose-400); }
.iv1--dark .iv1-row:hover .iv1-name{ color:rgba(255,255,255,.62); }
.iv1--dark .iv1-row.active:hover .iv1-name{ color:#fff; }
.iv1--dark .iv1-row.active .iv1-short{ color:rgba(255,255,255,.5); }
.iv1--dark .iv1-long{ color:rgba(255,255,255,.78); }
.iv1--dark .iv1-ghost{ -webkit-text-stroke-color:rgba(249,47,100,.32); }
.iv1--dark .iv1-row.active .iv1-ghost{ opacity:.42; }
.iv1--dark .iv1-aeo{ color:rgba(255,255,255,.5); border-left-color:var(--rose-400); }
.iv1--dark .iv1-subs span{ color:rgba(255,255,255,.82); border-top-color:rgba(255,255,255,.10); }
.iv1--dark .tickdot{ background:rgba(249,47,100,.16); color:var(--rose-300); }
.iv1--dark .ivv-btn-dark{ background:#fff; color:var(--ink); }
.iv1--dark .ivv-btn-dark:hover{ background:var(--rose-500); color:#fff; }
.iv1--dark .iv1-row.active{ position:relative; }
.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 */
.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); }
.iv1d-track{ display:inline-flex; align-items:center; gap:34px; white-space:nowrap; will-change:transform; animation:iv1dScroll 42s linear infinite; }
.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); }
.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%); } }
.iv1--dark:hover .iv1d-track{ animation-play-state:paused; }

/* ============================================================
   VARIANT C — IMAGE-BACKGROUND HOVER BLOCKS
   ============================================================ */
.iv3-grid{ margin-top:clamp(34px,5vw,56px); display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.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; }
.iv3-block:nth-child(1){ grid-column:span 2; }
.iv3-block:nth-child(7){ grid-column:span 2; }
.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); }
.iv3-block:hover .iv3-photo{ transform:scale(1.08); }
.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; }
.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%); }
.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; }
.iv3-block:hover::before{ border-color:rgba(249,47,100,.45); }
.iv3-body{ position:relative; z-index:2; padding:clamp(22px,2.4vw,30px); color:#fff; }
.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; }
.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); }
.iv3-ico svg{ width:21px; height:21px; }
.iv3-num{ font-size:12px; font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.62); font-feature-settings:"tnum" 1; }
.iv3-tagn{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-300); }
.iv3-name{ margin-top:8px; font-size:clamp(22px,2.1vw,29px); font-weight:600; letter-spacing:-.025em; line-height:1.05; }
.iv3-reveal{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1), opacity .45s; }
.iv3-block:hover .iv3-reveal,.iv3-block.open .iv3-reveal{ grid-template-rows:1fr; opacity:1; }
.iv3-reveal-in{ overflow:hidden; }
.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; }
.iv3-subs{ margin:15px 0 0; display:flex; flex-wrap:wrap; gap:7px; }
.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); }
.iv3-cta{ margin-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#fff; }
.iv3-cta svg{ width:15px; height:15px; transition:transform .3s; }
.iv3-block:hover .iv3-cta svg{ transform:translateX(3px); }

/* ============================================================
   VARIANT D — APPLE-CENTRIC (type-forward, no media)
   ============================================================ */
.iv4-head{ text-align:center; max-width:none; }
.iv4-head .ivv-eyebrow{ justify-content:center; }
.iv4-head .ivv-h{ margin-left:auto; margin-right:auto; max-width:18ch; }
.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; }
.iv4-seg::-webkit-scrollbar{ display:none; }
.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); }
.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; }
.iv4-seg-btn:hover{ color:var(--ink); }
.iv4-seg-btn.active{ color:var(--ink); }
.iv4-stage{ position:relative; z-index:1; margin-top:clamp(40px,6vw,64px); min-height:clamp(388px,44vh,468px); display:grid; place-items:center; }
.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); }
.iv4-slide.active{ opacity:1; transform:none; }
.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%); }
.iv4-slide.active .iv4-halo{ opacity:.5; }
/* animated vector rings */
.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; }
.iv4-rings svg{ width:100%; height:100%; overflow:visible; }
.iv4-rings .r{ fill:none; stroke:var(--hue); transform-origin:300px 300px; }
.iv4-rings .r1{ stroke-width:1.1; opacity:.5; stroke-dasharray:2 11; animation:iv4spin 30s linear infinite; }
.iv4-rings .r2{ stroke-width:1; opacity:.34; stroke-dasharray:54 30; animation:iv4spin 46s linear infinite reverse; }
.iv4-rings .r3{ stroke-width:1; opacity:.2; stroke-dasharray:1 16; animation:iv4spin 70s linear infinite; }
.iv4-rings .orbit{ transform-origin:300px 300px; }
.iv4-rings .o1{ animation:iv4spin 14s linear infinite; }
.iv4-rings .o2{ animation:iv4spin 22s linear infinite reverse; }
.iv4-rings .dot{ fill:var(--hue); filter:drop-shadow(0 0 7px color-mix(in srgb, var(--hue) 70%, transparent)); }
.iv4-rings .dot-sm{ opacity:.7; }
.iv4-slide.active .iv4-rings{ opacity:1; }
@keyframes iv4spin{ to{ transform:rotate(360deg); } }
.iv4-tag{ position:relative; z-index:2; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--rose-600); }
.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; }
.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; }
.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; }
.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; }
.iv4-subline span:hover{ border-color:var(--rose-300); color:var(--ink); transform:translateY(-2px); }
.iv4-cta{ position:relative; z-index:2; margin-top:34px; pointer-events:auto; }
.iv4-nav{ position:relative; z-index:4; display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(30px,4vw,46px); }
.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; }
.iv4-arrow svg{ width:18px; height:18px; }
.iv4-arrow:hover{ border-color:transparent; background:var(--ink); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,12,14,.16); }
.iv4-arrow:active{ transform:translateY(0) scale(.96); }
.iv4-progress{ position:relative; width:min(240px,38vw); height:3px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.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); }
.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")
   ============================================================ */
.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); }
.iv6-rail{ border-right:1px solid var(--line); background:var(--bg-2); padding:14px; }
.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; }
.iv6-tab-idx{ font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--faint); font-feature-settings:"tnum" 1; transition:color .3s; }
.iv6-tab-name{ font-size:16px; font-weight:500; letter-spacing:-.02em; line-height:1.15; transition:color .3s; }
.iv6-tab-arrow{ margin-left:auto; width:16px; height:16px; color:var(--rose-500); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; }
.iv6-tab-arrow svg{ width:16px; height:16px; }
.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); }
.iv6-tab:hover{ color:var(--ink); background:var(--bg); }
.iv6-tab.active{ color:var(--ink); background:var(--bg); box-shadow:0 6px 20px rgba(11,12,14,.06); }
.iv6-tab.active::before{ transform:scaleY(1); }
.iv6-tab.active .iv6-tab-idx{ color:var(--rose-600); }
.iv6-tab.active .iv6-tab-arrow{ opacity:1; transform:none; }

.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) */
.iv6-cards{ display:grid; flex:1; }
.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); }
.iv6-card.active{ opacity:1; transform:none; pointer-events:auto; }
.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); }
.iv6-detail-meta .seq{ color:var(--rose-600); }
.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; }
.iv6-detail-meta .ico svg{ width:18px; height:18px; }
.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; }
.iv6-desc{ margin:18px 0 0; font-size:16px; line-height:1.6; font-weight:300; color:var(--ink-2); max-width:54ch; }
.iv6-rows{ margin:26px 0 0; border-top:1px solid var(--line); }
.iv6-rrow{ display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:start; padding:15px 0; border-bottom:1px solid var(--line); }
.iv6-rrow .k{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.iv6-rrow .v{ display:flex; flex-wrap:wrap; gap:7px; }
.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; }
.iv6-rrow .v i:hover{ border-color:var(--rose-300); color:var(--ink); }
.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; }
.iv6-cta{ margin-top:auto; padding-top:30px; }

/* ============================================================
   SHARED CLOSER — AI NOTE + RECOMMENDATION
   ============================================================ */
.ivv-closer{ background:var(--bg); }
.ai-note{ position:relative; border-radius:26px; overflow:hidden; background:#0A0B0E; border:1px solid #16181d; padding:clamp(34px,5vw,64px); }
.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%); }
.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%); }
.ai-note-inner{ position:relative; z-index:2; max-width:64ch; color:#fff; }
.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); }
.ai-note-badge svg{ width:17px; height:17px; }
.ai-note-h{ margin:22px 0 0; font-size:clamp(24px,2.6vw,34px); font-weight:500; letter-spacing:-.025em; line-height:1.08; }
.ai-note-p{ margin:16px 0 0; font-size:16px; line-height:1.62; font-weight:300; color:rgba(255,255,255,.84); }
.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; }
.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; }
.ai-note-cta svg{ width:17px; height:17px; transition:transform .25s; }
.ai-note-cta:hover{ background:var(--rose-500); color:#fff; transform:translateY(-2px); }
.ai-note-cta:hover svg{ transform:translateX(3px); }

.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; }
.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)); }
.ivv-reco-h{ margin:0; font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.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; }
.ivv-reco-actions{ display:flex; gap:12px; flex-wrap:wrap; flex:none; }
.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){
  .iv3-grid{ grid-template-columns:repeat(2,1fr); }
  .iv3-block:nth-child(1),.iv3-block:nth-child(7){ grid-column:span 2; }
}
@media (max-width:880px){
  .iv1-short{ display:none; }
  .iv1-detail-in{ grid-template-columns:1fr; padding-left:0; gap:24px; }
  .iv1-row.active .iv1-detail{ max-height:640px; }
  .iv6-panel{ grid-template-columns:1fr; }
  .iv6-rail{ border-right:none; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px; }
  .iv6-tab{ width:auto; flex:1 1 40%; }
  .iv6-tab::before{ left:14px; right:14px; top:auto; bottom:0; width:auto; height:3px; transform:scaleX(0); }
  .iv6-tab.active::before{ transform:scaleX(1); }
  .iv6-detail{ min-height:0; }
}
@media (max-width:620px){
  .iv3-grid{ grid-template-columns:1fr; }
  .iv3-block:nth-child(1),.iv3-block:nth-child(7){ grid-column:auto; }
  .iv3-reveal{ grid-template-rows:1fr; opacity:1; }
  .iv4-name{ font-size:clamp(34px,11vw,52px); }
  .iv6-rrow{ grid-template-columns:1fr; gap:8px; }
}
@media (prefers-reduced-motion:reduce){

  .reveal{ opacity:1 !important; transform:none !important; }
  .iv1d-track{ animation:none !important; }
}

/* ============================================================
   WDI — Engagement Models
   Cinematic three-act stage
   ============================================================ */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* variant label */
.em-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
.em-vtag b{color:var(--ink);font-weight:500;}
.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 */
.em-sec{position:relative;padding:120px 0 130px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
.em-sec.alt{background:var(--bg-2);}
.em-head{max-width:880px;position:relative;z-index:3;}
.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);}
.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);}
.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;}
.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;}
.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 */
.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;}
.em-btn svg{width:16px;height:16px;transition:transform .25s;}
.em-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(228,18,82,.28);}
.em-btn:hover svg{transform:translateX(3px);}
.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;}
.em-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
.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;}
.em-link svg{width:15px;height:15px;color:var(--rose-600);transition:transform .25s;}
.em-link:hover{color:var(--rose-600);gap:12px;}
.em-link:hover svg{transform:translateX(3px);}

/* section-level CTA banner */
.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);}
.em-sec.alt .em-cta{background:radial-gradient(120% 180% at 100% 0%,rgba(249,47,100,.08),transparent 58%),var(--bg);}
.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));}
.em-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
.em-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
.em-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

/* ============================================================
   VARIANT A — CINEMATIC THREE-ACT STAGE
   ============================================================ */
.ema-stack{margin-top:70px;display:flex;flex-direction:column;gap:24px;position:relative;z-index:2;}
.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;
}
#engage-a.in .ema-row{opacity:1;transform:none;transition-delay:var(--d,0s);}
.ema-row:hover{border-color:var(--rose-300);box-shadow:0 30px 70px rgba(11,12,14,.08);}

/* left: huge index + positioning pill */
.ema-side{display:flex;flex-direction:column;gap:18px;}
.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;}
.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;}
.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 */
.ema-main{min-width:0;}
.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 */
.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;}
#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%;}}
.ema-desc{margin-top:14px;font-size:15.5px;font-weight:400;line-height:1.55;color:var(--ink-2);}
.ema-inc{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.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;}
.ema-list{display:flex;flex-direction:column;gap:10px;}
.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);}
#engage-a.in .ema-row .ema-li{opacity:1;transform:none;transition-delay:calc(var(--d,0s) + .35s + var(--li,0s));}
.ema-check{width:20px;height:20px;display:grid;place-items:center;color:var(--rose-500);}
.ema-check svg{width:17px;height:17px;}
.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);}
.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;}
.ema-foot{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

/* right: refined visual mark */
.ema-mark{position:relative;width:100%;height:200px;display:grid;place-items:center;}
.ema-mark svg{width:100%;height:100%;overflow:visible;}
.ema-mark .ring{fill:none;stroke:var(--line-2);stroke-width:1;}
.ema-mark .dot{fill:var(--rose-500);}
.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);}}
.ema-mark .orbit{animation:emSpin 22s linear infinite;transform-origin:center;}
@keyframes emSpin{to{transform:rotate(360deg);}}
.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 */
.ema-row.is-feat{background:#0B0C0E;border-color:#1A1C22;color:#fff;}
.ema-row.is-feat:hover{border-color:#2A2D34;}
.ema-row.is-feat .ema-pill{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
.ema-row.is-feat .ema-title{color:#fff;}
.ema-row.is-feat .ema-desc{color:rgba(255,255,255,.78);}
.ema-row.is-feat .ema-inc{border-top-color:rgba(255,255,255,.10);}
.ema-row.is-feat .ema-inc-label{color:var(--rose-300);}
.ema-row.is-feat .ema-li{color:#fff;}
.ema-row.is-feat .ema-check{color:var(--rose-300);}
.ema-row.is-feat .ema-best{color:rgba(255,255,255,.72);border-left-color:var(--rose-400);}
.ema-row.is-feat .ema-best b{color:var(--rose-300);}
.ema-row.is-feat .ema-btn{background:#fff;color:var(--ink);}
.ema-row.is-feat .ema-btn:hover{background:var(--rose-500);color:#fff;}
.ema-row.is-feat .ema-link{color:#fff;}
.ema-row.is-feat .ema-mark .ring{stroke:rgba(255,255,255,.16);}
/* recommended badge — kept available but unused in DOM */
.ema-flag{display:none;}

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

/* ============================================================
   WDI — Featured Case Studies  (Variants A + B)
   CMS-powered proof slots. No invented names / metrics.
   ============================================================ */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

.cs-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
.cs-vtag b{color:var(--ink);font-weight:500;}
.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;}

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

/* header */
.cs-head{max-width:860px;position:relative;z-index:2;}
.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);}
.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);}
.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;}
.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;}
.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 */
.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;}
.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);}
.cs-tag-ind::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));}
.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;}
.cs-cms::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--faint);}

.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;}
.cs-btn svg{width:16px;height:16px;transition:transform .25s;}
.cs-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
.cs-btn:hover svg{transform:translateX(3px);}
.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;}
.cs-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
.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;}
.cs-link svg{width:15px;height:15px;color:var(--rose-600);transition:transform .25s;}
.cs-link:hover{color:var(--rose-600);gap:11px;}
.cs-link:hover svg{transform:translateX(3px);}

/* section CTA */
.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);}
.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));}
.cs-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
.cs-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:60ch;}
.cs-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}

/* abstract visual helper (shared) */
.cs-viz{position:relative;background:#0a0b0e;overflow:hidden;}
.cs-viz-mesh{position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.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%);}
.cs-viz-ico{position:absolute;color:#fff;opacity:.95;filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));}
.cs-viz-ico svg{width:100%;height:100%;}
.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)
   ============================================================ */
.csa-body{margin-top:64px;position:relative;z-index:2;border-top:1px solid var(--line);}
.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);
}
#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 */
.csa-viz{border-radius:22px;min-height:240px;box-shadow:0 18px 44px rgba(11,12,14,.10);}
.csa-row:hover .cs-viz-mesh{transform:scale(1.06);}
.csa-viz .cs-viz-ico{right:24px;bottom:22px;width:52px;height:52px;}
.csa-viz .cs-viz-case{left:24px;top:22px;font-size:12px;}
.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 */
.csa-main{min-width:0;display:flex;flex-direction:column;}
.csa-toprow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.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;}
.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 */
.csa-proof{margin-top:24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;}
.csa-cell{padding-top:14px;border-top:1px solid var(--line);}
.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;}
.csa-cell-label::before{content:"";width:6px;height:6px;border-radius:50%;}
.csa-cell.is-chal .csa-cell-label{color:#C2691B;}.csa-cell.is-chal .csa-cell-label::before{background:#E8821E;}
.csa-cell.is-sol .csa-cell-label{color:var(--rose-600);}.csa-cell.is-sol .csa-cell-label::before{background:var(--rose-500);}
.csa-cell.is-out .csa-cell-label{color:#5A1FD4;}.csa-cell.is-out .csa-cell-label::before{background:var(--violet);}
.csa-cell p{font-size:13px;font-weight:300;line-height:1.55;color:var(--ink-2);}
.csa-cell.is-out.pending p{color:var(--faint);font-style:italic;}
.csa-foot{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.csa-tags{display:flex;flex-wrap:wrap;gap:8px;}

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

.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);
}
#cases-b.in .csb-card{animation:csRise .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d);}
.csb-card:hover{border-color:var(--rose-300);box-shadow:0 22px 56px rgba(11,12,14,.10);transform:translateY(-4px);}
#cases-b.in .csb-card:hover{transform:translateY(-4px);}
.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;}
.csb-card:hover::after{opacity:1;}

/* featured (large) */
.csb-feature .csb-viz{height:260px;}
.csb-feature:hover .cs-viz-mesh{transform:scale(1.05);}
.csb-viz .cs-viz-ico{right:26px;bottom:22px;width:54px;height:54px;}
.csb-viz .cs-viz-case{left:26px;top:24px;font-size:12px;}
.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);}
.csb-body{padding:30px 32px 28px;display:flex;flex-direction:column;flex:1;}
.csb-toprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:13px;}
.csb-title{font-size:24px;font-weight:500;letter-spacing:-0.025em;line-height:1.12;color:var(--ink);text-wrap:balance;}
.csb-feature .csb-title{font-size:clamp(24px,2.4vw,30px);}
.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 */
.csb-proof{margin-top:22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
.csb-cell{padding-top:13px;border-top:1px solid var(--line);}
.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;}
.csb-cell-label::before{content:"";width:5px;height:5px;border-radius:50%;}
.csb-cell.is-chal .csb-cell-label{color:#C2691B;}.csb-cell.is-chal .csb-cell-label::before{background:#E8821E;}
.csb-cell.is-sol .csb-cell-label{color:var(--rose-600);}.csb-cell.is-sol .csb-cell-label::before{background:var(--rose-500);}
.csb-cell.is-out .csb-cell-label{color:#5A1FD4;}.csb-cell.is-out .csb-cell-label::before{background:var(--violet);}
.csb-cell p{font-size:12.5px;font-weight:300;line-height:1.5;color:var(--ink-2);}
.csb-cell.is-out.pending p{color:var(--faint);font-style:italic;}

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

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

/* ============================================================
   VARIANT C — INTERACTIVE PROOF SWITCHER (horizontal expand)
   ============================================================ */
.csc-stage{margin-top:60px;position:relative;z-index:2;display:flex;gap:16px;height:520px;}
.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);
}
#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);}
.csc-panel.active{flex:3.4;box-shadow:0 30px 80px rgba(11,12,14,.22);}

/* per-panel mesh + parallax layers */
.csc-mesh{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s;}
.csc-panel:hover .csc-mesh{transform:scale(1.05);}
.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%);}
.csc-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,12,.15) 30%,rgba(8,9,12,.82) 100%);}
.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. */
.csc-inner{position:absolute;left:0;bottom:0;z-index:3;width:680px;padding:32px;color:#fff;}
.csc-head{display:flex;align-items:center;gap:15px;}
.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;}
.csc-ico svg{width:24px;height:24px;}
.csc-panel.active .csc-ico{background:linear-gradient(135deg,var(--rose-600),var(--rose-400));border-color:transparent;transform:scale(1.05);}
.csc-headtext{min-width:0;display:flex;flex-direction:column;gap:5px;}
.csc-ind{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap;}
.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 */
.csc-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),opacity .45s ease;}
.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;}
.csc-reveal-in{overflow:hidden;min-height:0;padding-top:22px;}
.csc-toprow{margin-bottom:12px;}
.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;}
.csc-oneline{font-size:14px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.82);max-width:50ch;}
.csc-proof{margin-top:20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
.csc-cell{padding-top:12px;border-top:1px solid rgba(255,255,255,.14);}
.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;}
.csc-cell-l::before{content:"";width:5px;height:5px;border-radius:50%;}
.csc-cell.is-chal .csc-cell-l{color:#FFB27A;}.csc-cell.is-chal .csc-cell-l::before{background:#E8821E;}
.csc-cell.is-sol .csc-cell-l{color:var(--rose-300);}.csc-cell.is-sol .csc-cell-l::before{background:var(--rose-400);}
.csc-cell.is-out .csc-cell-l{color:#C9A6FF;}.csc-cell.is-out .csc-cell-l::before{background:var(--violet);}
.csc-cell p{font-size:12px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.74);}
.csc-cell.is-out.pending p{font-style:italic;color:rgba(255,255,255,.5);}
.csc-foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.csc-tags{display:flex;flex-wrap:wrap;gap:7px;}
.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;}
.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;}
.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));}
.csc-link .ar svg{width:15px;height:15px;}
.csc-link:hover{gap:11px;}
.csc-hint{margin-top:18px;font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:8px;}
.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 */
  .csc-stage{flex-direction:column;height:auto;gap:12px;}
  .csc-panel{flex:none;}
  .csc-panel.active{flex:none;box-shadow:0 18px 50px rgba(11,12,14,.16);}
  .csc-inner{position:relative;width:100%;padding:24px;}
  .csc-ghost{font-size:96px;top:auto;bottom:-12px;}
  .csc-title{white-space:normal;}
  .csc-proof{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  .csc-proof{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .csc-panel{opacity:1!important;transform:none!important;}
}

/* WDI — Testimonials · 3 variants */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
.ts-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
.ts-vtag b{color:var(--ink);font-weight:500;}
.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;}

.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);}
.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);}
.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;}
.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;}

.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));}
}
.tsc-card .ts-key{
  background:linear-gradient(120deg,#FF6F92,#FFB3FF 50%,#FFC2D2);
  -webkit-background-clip:text;background-clip:text;
}

.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;
}
.ts-arrow:hover{border-color:var(--rose-300);background:#fff;transform:translateY(-2px);color:var(--rose-600);}
.ts-arrow svg{width:18px;height:18px;}

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

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

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

/* VARIANT C — Editorial spotlight + avatar cluster */
.tsc-sec{position:relative;padding:120px 0 150px;background:#0E0F12;color:#fff;border-top:1px solid var(--line);overflow:hidden;}
.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);}}
.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;}

.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 */
.tsc-feat{display:flex;flex-direction:column;}
.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;}
.tsc-meta .ts-eyebrow{color:var(--rose-300);}
.tsc-meta .ts-eyebrow::before{box-shadow:0 0 12px rgba(249,47,100,.6);}
.tsc-meta .divider{width:32px;height:1px;background:rgba(255,255,255,.18);}
.tsc-meta .counter b{color:#fff;font-feature-settings:"tnum" 1;font-weight:600;}

.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;}

.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;}
.tsc-quote.swap{opacity:0;transform:translateY(8px);}

.tsc-author{margin-top:42px;display:flex;align-items:center;gap:18px;}
.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;}
.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);}}
.tsc-author .av img{width:100%;height:100%;object-fit:cover;}
.tsc-author .name{font-size:17px;font-weight:500;color:#fff;letter-spacing:-0.01em;}
.tsc-author .role{margin-top:3px;font-size:13.5px;color:rgba(255,255,255,.65);}

.tsc-controls{margin-top:48px;display:flex;align-items:center;gap:14px;}
.tsc-controls .ts-arrow{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px);}
.tsc-controls .ts-arrow:hover{background:rgba(255,255,255,.12);border-color:var(--rose-300);color:#fff;}
.tsc-progress{flex:1;max-width:200px;height:2px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden;position:relative;}
.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 */
.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;}
.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%);}}
.tsc-list:hover .tsc-list-inner{animation-play-state:paused;}

.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;}
.tsc-voice:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);transform:translateX(-3px);}
.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);}
.tsc-voice .av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:rgba(255,255,255,.10);}
.tsc-voice .av img{width:100%;height:100%;object-fit:cover;}
.tsc-voice .info{min-width:0;}
.tsc-voice .vname{font-size:13.5px;font-weight:500;color:#fff;letter-spacing:-0.005em;}
.tsc-voice .vrole{margin-top:2px;font-size:11.5px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tsc-voice .vbar{margin-left:auto;flex:none;width:3px;height:18px;border-radius:3px;background:rgba(255,255,255,.10);}
.tsc-voice.active .vbar{background:linear-gradient(180deg,var(--rose-500),var(--violet));}

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

/* ============================================================
   WDI — FAQs & Answer Bank  (Variants A–E)
   WDI system: rose accent, ink type, Figtree, light.
   ============================================================ */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

.fq-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
.fq-vtag b{color:var(--ink);font-weight:500;}
.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;}

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

.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);}
.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);}
.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;}
.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;}
.fq-supp{margin-top:14px;font-size:15px;line-height:1.65;font-weight:400;color:var(--muted);max-width:62ch;text-wrap:pretty;}

.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;}
.fq-tags{display:flex;flex-wrap:wrap;gap:7px;}

/* section CTA */
.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);}
.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));}
.fq-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
.fq-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
.fq-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}
.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;}
.fq-btn svg{width:16px;height:16px;transition:transform .25s;}
.fq-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
.fq-btn:hover svg{transform:translateX(3px);}
.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;}
.fq-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

/* plus/minus toggle */
.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;}
.fq-pm::before,.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;}
.fq-pm::after{transform:rotate(90deg);}
.fq-open .fq-pm{background:var(--ink);border-color:var(--ink);}
.fq-open .fq-pm::before,.fq-open .fq-pm::after{background:#fff;}
.fq-open .fq-pm::after{transform:rotate(0deg);}

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

/* ============================================================
   VARIANT A — MINIMAL SPLIT (sticky header left, accordion right)
   ============================================================ */
.fqa-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:start;}
.fqa-head{position:sticky;top:100px;align-self:start;}
.fqa-list{border-top:1px solid var(--line);}
.fqa-item{border-bottom:1px solid var(--line);}
.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);}
.fqa-qtext{flex:1;font-size:18px;font-weight:500;letter-spacing:-0.015em;line-height:1.3;color:var(--ink);transition:color .25s;}
.fqa-item:hover .fqa-qtext{color:var(--rose-700);}
.fqa-panel-inner{padding:0 54px 28px 0;}
.fqa-a{font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-2);}
.fqa-meta{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.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)
   ============================================================ */
.fqb-head{max-width:880px;margin:0 auto;text-align:center;}
.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;}
.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;}}
.fqb-list{margin-top:60px;max-width:880px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:14px;}
.fqb-item{border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden;transition:border-color .3s,box-shadow .3s;}
.fqb-item.fq-open{border-color:var(--rose-300);box-shadow:0 16px 40px rgba(11,12,14,.06);}
.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);}
.fqb-qtext{flex:1;font-size:18px;font-weight:500;letter-spacing:-0.015em;color:var(--ink);}
.fqb-panel-inner{padding:0 28px 26px;}
.fqb-a{font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-2);max-width:74ch;}
.fqb-meta{margin-top:16px;}

/* ============================================================
   VARIANT C — INTERACTIVE HOVER-EXPAND (two columns)
   ============================================================ */
.fqc-grid{margin-top:54px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.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;}
.fqc-item:hover,.fqc-item.fq-open{border-color:var(--rose-300);box-shadow:0 18px 44px rgba(11,12,14,.08);}
.fqc-q{display:flex;align-items:center;gap:16px;padding:24px 26px;}
.fqc-num{font-size:12px;font-weight:600;color:var(--rose-600);font-feature-settings:"tnum" 1;}
.fqc-qtext{flex:1;font-size:17px;font-weight:500;letter-spacing:-0.015em;line-height:1.3;color:var(--ink);}
.fqc-panel-inner{padding:0 26px 26px 56px;}
.fqc-a{font-size:14.5px;font-weight:300;line-height:1.6;color:var(--ink-2);}
.fqc-meta{margin-top:14px;}

/* ============================================================
   VARIANT D — ASK PANEL (floating ? opens a blurred overlay)
   ============================================================ */
.fqd-sec{text-align:center;}
.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;}
.fqd-launch:hover{border-color:var(--rose-300);box-shadow:0 16px 40px rgba(249,47,100,.12);transform:translateY(-2px);}
.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);}
.fqd-launch-text{text-align:left;}
.fqd-launch-text b{display:block;font-size:16px;font-weight:500;color:var(--ink);}
.fqd-launch-text span{font-size:13px;color:var(--muted);}

.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;}
.fqd-overlay.open{display:block;opacity:1;}
/* faded question list pinned to the left */
.fqd-rail{position:absolute;left:0;top:0;bottom:0;width:340px;padding:90px 36px 40px;overflow-y:auto;}
.fqd-rail-h{font-size:13px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.5);margin-bottom:22px;}
.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;}
.fqd-qbtn .car{opacity:0;color:#fff;transition:opacity .25s;flex:none;}
.fqd-qbtn:hover{color:rgba(255,255,255,.85);}
.fqd-qbtn.active{color:#fff;font-weight:500;}
.fqd-qbtn.active .car{opacity:1;}
/* centered modal card with image on top */
.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);}
.fqd-overlay.open .fqd-card{opacity:1;}
.fqd-card.swap{opacity:0;transform:translate(-50%,-46%);}
.fqd-card-media{position:relative;width:100%;height:230px;flex:none;background:#0c0d11;overflow:hidden;}
.fqd-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.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;}
.fqd-close:hover{background:rgba(11,12,14,.5);transform:rotate(90deg);}
.fqd-close svg{width:18px;height:18px;}
.fqd-card-body{padding:46px 48px 46px;overflow-y:auto;text-align:left;display:flex;flex-direction:column;align-items:center;}
.fqd-card-body>*{width:100%;max-width:560px;}
.fqd-main-type{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-600);}
.fqd-main-q{margin-top:14px;font-size:32px;font-weight:500;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);}
.fqd-main-a{margin-top:20px;font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2);}
.fqd-main-meta{margin-top:26px;}
.fqd-main-meta .fq-tags{justify-content:flex-start;}
/* ---- per-card extra module (inset card, like the reference) ---- */
.fqd-extra{margin-top:30px;text-align:left;}
.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 */
.fqd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fqd-stat{text-align:left;}
.fqd-stat b{display:block;font-size:38px;font-weight:500;letter-spacing:-0.04em;line-height:1;color:var(--ink);}
.fqd-stat span{display:block;margin-top:10px;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--muted);}
/* check list */
.fqd-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;}
.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);}
.fqd-check svg{width:18px;height:18px;color:var(--rose-500);margin-top:1px;}
/* comparison bars — framed inset card */
.fqd-bars{border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:18px;}
.fqd-bar-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;}
.fqd-bar-l{font-size:14px;font-weight:500;color:var(--ink);}
.fqd-bar-v{font-size:13.5px;font-weight:500;color:var(--muted);text-align:right;font-feature-settings:"tnum" 1;}
.fqd-bar-track{grid-column:1 / -1;height:6px;border-radius:5px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;}
.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 */
.fqd-steps{display:flex;flex-direction:column;gap:0;}
.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;}
.fqd-step:last-child{border-bottom:none;}
.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;}
.fqd-step b{display:block;font-size:14.5px;font-weight:500;color:var(--ink);}
.fqd-step span{display:block;margin-top:3px;font-size:12.5px;font-weight:300;line-height:1.45;color:var(--muted);}
/* tag cloud */
.fqd-cloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;}
.fqd-fx{transform:translateY(8px);filter:blur(5px);}
.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)
   ============================================================ */
.fqe-sec{background:#0A0B0E;color:#fff;border-top:1px solid var(--line);}
.fqe-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.fqe-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;}
.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;}
.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;}
.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);}}
.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%);}
.fqe-sec .fq-eyebrow{color:var(--rose-300);}
.fqe-sec .fq-h{color:#fff;}
.fqe-sec .fq-aeo{color:rgba(255,255,255,.72);}
.fqe-wrap{margin-top:54px;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.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;}
.fqe-item:hover,.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);}
.fqe-q{display:flex;align-items:center;gap:16px;padding:24px 26px;}
.fqe-num{font-size:12px;font-weight:600;color:var(--rose-300);font-feature-settings:"tnum" 1;}
.fqe-qtext{flex:1;font-size:17px;font-weight:500;letter-spacing:-0.015em;color:#fff;}
.fqe-item .fq-pm{border-color:rgba(255,255,255,.24);}
.fqe-item .fq-pm::before,.fqe-item .fq-pm::after{background:#fff;}
.fqe-item.fq-open .fq-pm{background:#fff;border-color:#fff;}
.fqe-item.fq-open .fq-pm::before,.fqe-item.fq-open .fq-pm::after{background:var(--ink);}
.fqe-panel-inner{padding:0 26px 26px 56px;}
.fqe-a{font-size:14.5px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.78);}
.fqe-meta{margin-top:14px;}
.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){
  .fqa-grid{grid-template-columns:1fr;gap:34px;}
  .fqa-head{position:relative;top:0;}
  .fqc-grid,.fqe-wrap{grid-template-columns:1fr;}
}
@media(max-width:920px){
  .fqd-rail{position:absolute;width:100%;padding:78px 30px 20px;height:auto;bottom:auto;overflow:visible;}
  .fqd-rail-h{display:none;}
  .fqd-card{position:relative;left:0;top:0;transform:none;width:calc(100% - 40px);max-height:none;margin:210px auto 40px;}
  .fqd-overlay{overflow-y:auto;}
  .fqd-overlay.open .fqd-card{transform:none;}
}
@media(max-width:760px){
  .fqd-card-media{height:200px;}
  .fqd-card-body{padding:28px 24px;}
  .wrap{padding:0 22px;}
  .fq-sec{padding:70px 0 80px;}
  .fq-vtag{padding:22px 22px 0;}
  .fq-cta{padding:26px;gap:20px;}
  .fq-cta-actions{width:100%;}
  .fq-cta .fq-btn,.fq-btn-ghost{flex:1;justify-content:center;}
  .fqd-main{padding:30px 24px;}
}
@media(prefers-reduced-motion:reduce){
  .fqb-h .hl{animation:none;}
  .fqe-orb{animation:none;}
}

/* ============================================================
   WDI — Final CTA  (6 variants)
   ============================================================ */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

.ct-vtag{max-width:var(--maxw);margin:0 auto;padding:30px 40px 0;font-size:13.5px;color:var(--muted);}
.ct-vtag b{color:var(--ink);font-weight:500;}
.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;}

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

/* shared buttons */
.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;}
.ct-btn svg{width:16px;height:16px;transition:transform .25s;}
.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);}
.ct-btn:hover svg{transform:translateX(3px);}
.ct-btn.light{background:#fff;color:var(--ink);border-color:#fff;}
.ct-btn.light:hover{background:var(--rose-600);color:#fff;border-color:var(--rose-600);}
.ct-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.ct-btn.ghost:hover{background:transparent;color:var(--rose-600);border-color:var(--rose-300);box-shadow:none;}
.ct-btn.ghost-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}
.ct-btn.ghost-w:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff;box-shadow:none;}

/* eyebrow */
.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);}
.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)
   ============================================================ */
.cta-a-head{text-align:center;max-width:760px;margin:0 auto 44px;}
.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);}
.cta-a-head p{margin-top:16px;font-size:17px;font-weight:300;color:var(--muted);}
.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%);}
.cta-a-left{padding:54px 52px;}
.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);}
.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;}
.cta-a-desc{margin-top:16px;font-size:15.5px;font-weight:300;line-height:1.55;color:var(--ink-2);max-width:46ch;}
.cta-a-feats{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;}
.cta-a-feat{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;color:var(--ink-2);}
.cta-a-feat svg{width:18px;height:18px;color:var(--rose-600);flex:none;}
.cta-a-actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;}
.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;}
.cta-a-mock-cap{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.cta-a-mock-cap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose-500);}
.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;}
.cta-a-mockbar{display:flex;align-items:center;gap:6px;padding:13px 16px;border-bottom:1px solid var(--line);}
.cta-a-mockbar i{width:9px;height:9px;border-radius:50%;background:var(--line-2);}
.cta-a-mockbody{padding:20px;display:flex;flex-direction:column;gap:14px;flex:1;}
.cta-a-step{display:flex;align-items:center;gap:14px;padding:14px;border-radius:11px;border:1px solid var(--line);background:var(--bg-2);}
.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);}
.cta-a-step b{display:block;font-size:13.5px;font-weight:500;color:var(--ink);}
.cta-a-step span{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);}

/* ============================================================
   B — GRADIENT BANNER + PHONE (Deel style)
   ============================================================ */
.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;}
.cta-b-left{padding:64px 60px;color:#fff;position:relative;z-index:2;}
.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;}
.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;}
.cta-b-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;}
.cta-b-actions .ct-btn{background:#0B0C0E;border-color:#0B0C0E;}
.cta-b-actions .ct-btn:hover{background:#000;border-color:#000;}
.cta-b-phonewrap{position:relative;height:100%;min-height:420px;overflow:hidden;}
.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);}
.cta-b-screen{background:linear-gradient(180deg,#F3EEFE,#fff);border-radius:30px;overflow:hidden;padding:18px 16px;}
.cta-b-pnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.cta-b-pnav .lg{font-size:16px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
.cta-b-pnav .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--rose-500),var(--violet));}
.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);}
.cta-b-bal .lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
.cta-b-bal .amt{margin-top:6px;font-size:24px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
.cta-b-bal .amt span{font-size:13px;font-weight:400;color:var(--muted);}
.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;}
.cta-b-stat{margin-top:12px;display:flex;gap:8px;}
.cta-b-stat>div{flex:1;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px;}
.cta-b-stat .v{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;}
.cta-b-stat .k{font-size:10px;color:var(--muted);margin-top:3px;}

/* ============================================================
   C — 3D BLOBS (Cohere style)
   ============================================================ */
.cta-c{position:relative;border-radius:28px;overflow:hidden;background:#F5F0FB;border:1px solid var(--line);min-height:440px;display:flex;align-items:center;}
.cta-c-content{position:relative;z-index:2;padding:64px 60px;max-width:560px;}
.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);}
.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;}
.cta-c-btn{margin-top:40px;display:inline-flex;align-items:stretch;border-radius:12px;overflow:hidden;text-decoration:none;}
.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;}
.cta-c-btn .arr{display:grid;place-items:center;width:56px;background:var(--ink);color:#fff;margin-left:-14px;transition:background .3s;}
.cta-c-btn .arr svg{width:18px;height:18px;transition:transform .3s;}
.cta-c-btn:hover .lab,.cta-c-btn:hover .arr{background:var(--rose-600);}
.cta-c-btn:hover .arr svg{transform:translateX(3px);}
.cta-c-blobs{position:absolute;right:-40px;top:0;bottom:0;width:54%;z-index:1;}
.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);}
.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;}
.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;}
.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)
   ============================================================ */
.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%);}
.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;}
.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);}}
.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);}
.cta-d-foot{position:absolute;right:60px;bottom:56px;z-index:2;max-width:440px;text-align:left;}
.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);}
.cta-d-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;}
.cta-d-actions .ct-btn{border-radius:4px;}
.cta-d-actions .ct-btn.light{background:#fff;color:#0B0C0E;border-color:#fff;}

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

/* ============================================================
   F — TEXT + PEOPLE PHOTO CLUSTER (ElevenLabs style)
   ============================================================ */
.cta-f{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center;}
.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;}
.cta-f-left p{margin-top:16px;font-size:16px;font-weight:300;line-height:1.55;color:var(--ink-2);max-width:42ch;}
.cta-f-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;}
.cta-f-cluster{position:relative;height:440px;}
.cta-f-ph{position:absolute;border-radius:16px;overflow:hidden;box-shadow:0 24px 50px rgba(11,12,14,.16);background:#0c0d11;}
.cta-f-ph image-slot{width:100%;height:100%;display:block;}
.cta-f-ph.p1{width:46%;height:48%;right:18%;top:0;z-index:3;}
.cta-f-ph.p2{width:40%;height:42%;right:0;top:34%;z-index:2;}
.cta-f-ph.p3{width:42%;height:52%;left:2%;top:24%;z-index:1;}
.cta-f-ph.p4{width:30%;height:34%;left:30%;top:62%;z-index:4;}
.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) */
.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);}
.ct-trust p{font-size:13.5px;font-weight:300;line-height:1.55;color:var(--muted);max-width:70ch;}
.ct-close{margin-top:18px;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;}
.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) */
.ct-contact{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.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;}
.ct-copt:hover{border-color:var(--rose-300);transform:translateY(-3px);box-shadow:0 14px 32px rgba(11,12,14,.06);}
.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);}
.ct-copt .ico svg{width:21px;height:21px;}
.ct-copt b{font-size:15px;font-weight:500;color:var(--ink);}
.ct-copt span{display:block;margin-top:4px;font-size:12.5px;font-weight:300;line-height:1.45;color:var(--muted);}
.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){
  .cta-a-card{grid-template-columns:1fr;}
  .cta-a-right{border-left:none;border-top:1px solid rgba(255,255,255,.6);}
  .cta-b{grid-template-columns:1fr;}
  .cta-b-phonewrap{min-height:300px;}
  .cta-b-phone{position:relative;right:auto;top:auto;transform:none;margin:0 auto 30px;}
  .cta-f{grid-template-columns:1fr;gap:30px;}
  .cta-f-cluster{height:360px;}
  .ct-contact{grid-template-columns:1fr;}
  .cta-d h2{position:relative;left:0;top:0;padding:40px 30px 0;}
  .cta-d-foot{position:relative;right:0;bottom:0;padding:24px 30px 40px;max-width:none;}
  .cta-d{min-height:0;}
}
@media(max-width:680px){
  .wrap{padding:0 22px;}
  .ct-sec{padding:64px 0 72px;}
  .ct-vtag{padding:22px 22px 0;}
  .cta-a-left,.cta-b-left,.cta-c-content{padding:38px 28px;}
  .cta-a-feats{grid-template-columns:1fr;}
  .cta-c-blobs{opacity:.5;}
}
@media(prefers-reduced-motion:reduce){
  .cta-c-blob,.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-wf-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;
}



:where(#wdi-wf-page) a{ color:inherit; text-decoration:none; }
:where(#wdi-wf-page) img{ display:block; max-width:100%; }

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

/* ---- variant label strip ---- */
.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); }
.avv-vtag b{ color:var(--ink); font-weight:600; }
.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; }
.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 ---- */
.avv-sec{ position:relative; padding:clamp(70px,8vw,120px) 0; overflow:hidden; }
.avv-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); position:relative; z-index:2; }
.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); }
.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); }

.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; }
.avv-btn svg{ width:17px; height:17px; transition:transform .25s; }
.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); }
.avv-btn:hover svg{ transform:translateX(3px); }

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

/* ============================================================
   VARIANT A — LIQUID METAL INDEX
   ============================================================ */
.av-a{ background:var(--bg-2); padding-top:clamp(56px,6vw,84px); padding-bottom:clamp(56px,6vw,84px); }
.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 */
.ava-orb-wrap{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.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); }
.ava-orb:hover{ transform:scale(1.02); }
.ava-orb:active{ transform:scale(.985); }
.ava-orb svg{ width:100%; height:100%; display:block; overflow:visible; transform-origin:center; }
.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) */
.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; }
.ava-rings circle{ fill:none; stroke:var(--line-2); stroke-width:1; }

/* header cluster top-left */
.ava-head{ position:relative; z-index:3; max-width:660px; }
.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; }
.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); }
.ava-eyebrow-sup{ position:relative; display:inline-block; }
.ava-eyebrow-sup sup{ font-size:.5em; font-weight:600; color:var(--rose-600); margin-left:4px; top:-1.1em; }
.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; }
.ava-kicker sup{ color:var(--rose-600); font-size:.62em; }

/* numbered list */
.ava-list{ position:relative; z-index:3; margin-top:clamp(40px,5vw,72px); min-height:clamp(360px,40vw,520px); }
.ava-row{ position:relative; padding:clamp(20px,2.4vw,32px) 0; border-top:1px solid rgba(11,12,14,.12); cursor:pointer; }
.ava-row:last-child{ border-bottom:1px solid rgba(11,12,14,.12); }
.ava-row-main{ display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:clamp(16px,3vw,40px); }
.ava-num{ font-size:13px; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.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 */
.ava-inline-rate{ display:inline-flex; align-items:center; gap:9px; }
.ava-stars{ position:relative; display:inline-flex; line-height:0; }
.ava-stars .s-base,.ava-stars .s-fill{ display:inline-flex; gap:2.5px; }
.ava-stars .s-fill{ position:absolute; inset:0; width:var(--fill,100%); overflow:hidden; }
.ava-stars svg{ width:clamp(15px,1.3vw,19px); height:clamp(15px,1.3vw,19px); flex:none; }
.ava-stars .s-base svg path{ fill:none; stroke:var(--rose-200); stroke-width:1.6px; }
.ava-stars .s-fill svg path{ fill:var(--rose-500); stroke:none; }
.ava-rate-num{ font-size:clamp(14px,1.2vw,18px); font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.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; }
.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); }
.ava-name .badge img{ width:74%; height:74%; }
.ava-name .badge .aw-mono{ width:100%; height:100%; font-size:clamp(15px,1.4vw,22px); }
.ava-row:hover .ava-name{ transform:translateX(14px); }
.ava-row:hover .ava-name .badge{ opacity:1; transform:scale(1) rotate(0); }
.ava-meta{ text-align:right; }
.ava-meta .h{ font-size:clamp(13px,1.15vw,16px); font-weight:500; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.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 */
.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); }
.ava-row:hover .ava-drop,.ava-row:focus-within .ava-drop{ max-height:200px; opacity:1; margin-top:clamp(16px,1.8vw,22px); }
.ava-drop-list{ display:flex; flex-wrap:wrap; gap:12px; padding-left:clamp(54px,7vw,94px); }
.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; }
.ava-row:hover .ava-chip{ transform:none; opacity:1; }
.ava-row:hover .ava-chip:nth-child(2){ transition-delay:.07s; }
.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; }
.ava-chip .mini img{ width:74%; height:74%; object-fit:contain; }
.ava-chip .mini .aw-mono{ width:100%; height:100%; font-size:12px; }
.ava-chip .ctxt{ display:flex; flex-direction:column; line-height:1.3; }
.ava-chip .ctxt b{ font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.ava-chip .ctxt span{ font-size:11.5px; color:var(--muted); }

/* dark-mode toggle (top-right) */
.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; }
.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; }
.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; }
.ava-mode-lbl{ min-width:34px; text-align:left; }

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

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

/* ============================================================
   VARIANT B — KEYNOTE (Apple single-focus)
   ============================================================ */
.av-b{ background:#fff; text-align:center; }
.avb-head{ text-align:center; max-width:760px; margin:0 auto; }
.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; }
.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); }

.avb-stage{ position:relative; margin:clamp(46px,6vw,84px) auto 0; height:clamp(300px,34vw,440px); display:grid; place-items:center; }
.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; }
.avb-slide.on{ opacity:1; transform:scale(1); pointer-events:auto; }
.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; }
.avb-badge img{ width:64%; height:64%; object-fit:contain; }
.avb-badge .aw-mono{ width:100%; height:100%; font-size:clamp(34px,4vw,56px); }
.avb-award{ font-size:clamp(26px,3vw,40px); font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.avb-detail{ font-size:clamp(15px,1.3vw,18px); font-weight:300; color:var(--ink-2); max-width:42ch; }
.avb-year{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-600); font-weight:600; }

/* dots + progress */
.avb-dots{ display:flex; gap:10px; justify-content:center; margin-top:clamp(34px,4vw,52px); }
.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; }
.avb-dot.on{ width:30px; border-radius:5px; background:var(--ink); }
.avb-counter{ margin-top:20px; font-size:13px; letter-spacing:.06em; color:var(--faint); font-variant-numeric:tabular-nums; }
.avb-counter b{ color:var(--ink); font-weight:600; }

/* ============================================================
   VARIANT C — COLOUR WALL (Google)
   ============================================================ */
.av-c{ background:#fff; }
.avc-head{ max-width:920px; }
.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; }
.avc-grid{ margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.6vw,22px); }
.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; }
.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; }
.avc-tile:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(11,12,14,.18); }
.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); }
.avc-tile .badge img{ width:70%; height:70%; object-fit:contain; }
.avc-tile .badge .aw-mono{ width:100%; height:100%; font-size:22px; color:#0B0C0E; }
.avc-tile .tname{ font-size:clamp(20px,1.9vw,27px); font-weight:600; letter-spacing:-.02em; }
.avc-tile .thonor{ font-size:clamp(13px,1.1vw,15.5px); font-weight:400; opacity:.92; margin-top:4px; }
.avc-tile .tfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.avc-tile .tyear{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.78; }
.avc-tile .trate{ display:inline-flex; align-items:baseline; gap:4px; font-weight:700; }
.avc-tile .trate b{ font-size:clamp(20px,1.8vw,26px); letter-spacing:-.02em; }
.avc-tile .trate span{ font-size:12px; opacity:.7; }
/* deliberate Google-ish irregular spans */
.avc-tile.s-lg{ grid-column:span 6; }
.avc-tile.s-md{ grid-column:span 4; }
.avc-tile.s-sm{ grid-column:span 3; }
.avc-tile.s-wide{ grid-column:span 5; }
@media (max-width:980px){ .avc-tile{ grid-column:span 6 !important; } }
@media (max-width:560px){ .avc-tile{ grid-column:span 12 !important; } }

/* ============================================================
   VARIANT D — MISSION CONTROL (SpaceX dark)
   ============================================================ */
.av-d{ background:#070809; color:#EDEEF0; }
.av-d .avv-eyebrow{ color:#FF6F92; }
.av-d .avv-eyebrow::before{ box-shadow:0 0 12px rgba(255,111,146,.7); }
.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; }
.avd-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.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; }
.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; }
.avd-meta b{ color:#fff; font-weight:600; }

.avd-table{ margin-top:clamp(38px,4vw,56px); border-top:1px solid rgba(255,255,255,.12); }
.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; }
.avd-row:hover{ background:rgba(255,255,255,.035); }
.avd-row .idx{ font-family:ui-monospace,monospace; font-size:12px; color:#5A5F67; }
.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; }
.avd-row .badge img{ width:72%; height:72%; object-fit:contain; }
.avd-row .badge .aw-mono{ width:100%; height:100%; font-size:16px; }
.avd-row .nm{ font-size:clamp(18px,1.7vw,24px); font-weight:600; letter-spacing:-.02em; color:#fff; }
.avd-row .dt{ font-size:13.5px; color:#9AA0A8; font-weight:300; }
.avd-row .ct{ font-family:ui-monospace,monospace; font-size:12.5px; letter-spacing:.02em; color:#7B8088; }
.avd-row .rt{ text-align:right; font-variant-numeric:tabular-nums; }
.avd-row .rt b{ font-size:clamp(18px,1.6vw,22px); font-weight:600; color:#fff; }
.avd-row .rt span{ font-size:11px; color:#7B8088; display:block; letter-spacing:.1em; text-transform:uppercase; margin-top:2px; }
.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); }
.avd-row:hover .bar{ width:100%; }
@media (max-width:860px){ .avd-row{ grid-template-columns:40px 46px 1fr 80px; } .avd-row .dt,.avd-row .ct{ display:none; } }

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

/* ============================================================
   VARIANT E — PROOF WALL (Uxcel)
   ============================================================ */
.av-e{ background:#fff; }
.ave-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.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; }
.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; }
.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); }
.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; }
.ave-seal .t b{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.ave-seal .t span{ font-size:12.5px; color:var(--muted); }

.ave-cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,28px); }
.ave-card{ padding:clamp(20px,2vw,28px) 0; border-top:1px solid var(--line); }
.ave-card .top{ display:flex; align-items:center; gap:10px; }
.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; }
.ave-card .top .badge img{ width:74%; height:74%; object-fit:contain; }
.ave-card .top .badge .aw-mono{ width:100%; height:100%; font-size:12px; }
.ave-card .top .pn{ font-size:14px; font-weight:600; color:var(--ink); }
.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); }
.ave-card .stars{ display:inline-flex; gap:3px; color:var(--rose-500); }
.ave-card .stars svg{ width:16px; height:16px; }
.ave-card .cap{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--muted); }
@media (max-width:860px){ .ave-grid{ grid-template-columns:1fr; } .ave-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ave-cards{ grid-template-columns:1fr; } }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){

  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   WDI — Portfolio Page (View Our Work)
   header · technology-company band (moving faded text) · projects
   ============================================================ */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* ============================================================
   1 · HEADER
   ============================================================ */
.pp-hero{position:relative;padding:120px 0 90px;text-align:center;overflow:hidden;background:var(--bg);}
.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);}
.pp-hero .eyebrow::before,.pp-hero .eyebrow::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--rose-400));}
.pp-hero .eyebrow::after{background:linear-gradient(90deg,var(--rose-400),transparent);}
.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);}
.pp-hero h1 .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
.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);}
.pp-hero .meta{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;}
.pp-hero .meta .stat b{font-size:30px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
.pp-hero .meta .stat span{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--muted);}
.pp-hero .meta .div{width:1px;height:34px;background:var(--line-2);}
.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;}
.pp-scrollcue .mouse{width:22px;height:34px;border:1.5px solid var(--line-2);border-radius:12px;position:relative;}
.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)
   ============================================================ */
.pp-band{position:relative;padding:130px 0;overflow:hidden;background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;}
.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;}
.pp-band-track.r1{animation:ppMarqueeL 34s linear infinite;top:34%;}
.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%);}}
.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%);}}
.pp-band-in{position:relative;z-index:2;text-align:center;max-width:1000px;margin:0 auto;}
.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);}
.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);}}
.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;}
.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;}
.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)
   ============================================================ */
.pp-projects{position:relative;padding:96px 0 0;background:var(--bg);}
.pp-projects-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px;}
.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);}
.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);}
.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);}
.pp-projects-head p{max-width:42ch;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--muted);}

/* industry capsules */
.pp-caps{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.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;}
.pp-cap:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-2px);}
.pp-cap.active{color:#fff;background:var(--ink);border-color:var(--ink);}
.pp-cap .n{font-size:11px;opacity:.55;margin-left:6px;font-feature-settings:"tnum" 1;}

/* full-bleed cinematic panels */
.pp-stack{}
.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;}
.pp-card[hidden]{display:none;}
/* real media (image / video) fills the frame with a slow cinematic zoom */
.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);}
.pp-media img,.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);}
.pp-card.in .pp-media img,.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 */
.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%);}
.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%);}
.pp-card.hot .pp-glow{opacity:1;}

/* corner index + vertical industry */
.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%);}
.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;}
.pp-index b{color:#fff;}
.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);}
.pp-x .cross{color:var(--hue,#39E07B);font-weight:700;}
.pp-x b{color:#fff;}
.pp-vind{position:absolute;right:40px;top:0;bottom:0;z-index:3;display:flex;align-items:center;pointer-events:none;}
.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);}
.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) */
.pp-content{position:absolute;left:0;right:0;bottom:0;z-index:3;}
.pp-content-in{max-width:var(--maxw);margin:0 auto;padding:0 40px 70px;}
.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);}
.pp-logo .lg{font-weight:800;font-size:18px;letter-spacing:-0.02em;color:#fff;}
.pp-logo img{height:52px;width:auto;max-width:240px;object-fit:contain;display:block;}
.pp-logo .lg em{font-style:normal;color:color-mix(in srgb,var(--hue,#39E07B) 80%,#0B0C0E);}
.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;}
.pp-eyebrow .n{color:var(--hue,#39E07B);}
.pp-eyebrow .bar{width:30px;height:1px;background:rgba(255,255,255,.4);}
.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;}
.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;}
.pp-card.in .pp-name-tx{animation:ppSheen 1.5s cubic-bezier(.4,0,.2,1) .55s 1 forwards;}
.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;}}
.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;}
.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;}
.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;}
.pp-tags{display:flex;flex-wrap:wrap;gap:9px;}
.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);}
.pp-tag.lead{background:var(--hue,#39E07B);color:#0B0C0E;border-color:var(--hue,#39E07B);}
.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;}
.pp-explore svg{width:16px;height:16px;transition:transform .3s;}
.pp-explore:hover{background:var(--hue,#39E07B);border-color:var(--hue,#39E07B);color:#0B0C0E;transform:translateY(-2px);gap:16px;}
.pp-explore:hover svg{transform:translateX(3px);}
.pp-card.in .pp-logo,.pp-card.in .pp-eyebrow,.pp-card.in .pp-name,.pp-card.in .pp-tagline,.pp-card.in .pp-desc,.pp-card.in .pp-row{opacity:1;transform:none;}

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

/* ---- key impact zone (TOP-RIGHT, corporate) ---- */
.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;}
.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;}
.pp-keystat-label::before{content:"";width:16px;height:1px;background:color-mix(in srgb,var(--hue,#39E07B) 75%,#fff);opacity:.7;}
.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;}
.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;}
.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;}
.pp-mcap:not(:first-child){margin-left:11px;}
.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;}
.pp-card.in .pp-keystat-label,.pp-card.in .pp-keystat-h,.pp-card.in .pp-mcaps{opacity:1;transform:none;}

/* ---- review badges (BOTTOM-RIGHT, real award badge + short quote) ---- */
.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;}
.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);}
.pp-rev:nth-child(2){transition-delay:.1s;}
.pp-card.in .pp-rev{opacity:1;transform:none;}
.pp-rev-badge{height:54px;width:auto;flex:none;display:block;border-radius:8px;background:#fff;}
.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);}
.pp-rev-google .pp-rev-mk svg{width:27px;height:27px;display:block;}
.pp-rev-in{display:flex;flex-direction:column;gap:6px;line-height:1;}
.pp-rev-q{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-0.015em;line-height:1.18;}
.pp-rev-meta{display:inline-flex;align-items:center;gap:9px;}
.pp-rev .st{display:inline-flex;gap:1.5px;color:#FFC53D;}
.pp-rev .st svg{width:12px;height:12px;}
.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)
   ============================================================ */
.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;}
.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);}}
.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%);}
.pp-cta-in{position:relative;z-index:2;max-width:760px;padding:0 40px;}
.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);}
.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);}}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.pp-cta-btn .ar svg{width:16px;height:16px;}
.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);}
.pp-cta-btn:hover .ar{transform:translateX(2px);}
.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;}
.pp-cta-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
.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;}
.pp-cta-stats .s b{font-size:28px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
.pp-cta-stats .s span{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--muted);}
.pp-cta-stats .d{width:1px;height:32px;background:var(--line-2);}
.pp-cta.in .pp-cta-eyebrow,.pp-cta.in .pp-cta-h,.pp-cta.in .pp-cta-p,.pp-cta.in .pp-cta-actions,.pp-cta.in .pp-cta-stats{opacity:1;transform:none;}
@media(max-width:760px){.pp-cta{min-height:auto;padding:90px 0;}.pp-cta-stats{gap:18px;}.pp-cta-stats .d{display:none;}}
@media(prefers-reduced-motion:reduce){.pp-cta-aura{animation:none;}.pp-cta .pp-cta-in *{opacity:1!important;transform:none!important;}}

/* foreground collateral (device mockup) — vertically centred on the right */
.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;}
.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){
  .pp-row{max-width:46%;}
  .pp-rev{max-width:240px;padding:10px 15px 10px 10px;gap:11px;}
  .pp-rev-badge{height:46px;}
  .pp-rev-google .pp-rev-mk{width:42px;height:42px;}
  .pp-rev-q{font-size:13.5px;}
  .pp-keystat-h{font-size:clamp(16px,1.9vw,20px);max-width:16ch;}
}
@media(max-width:760px){.pp-device{position:relative;right:auto;top:auto;height:auto;max-width:74%;margin:24px auto -10px;display:block;transform:none;}.pp-card.in .pp-device{transform:none;}}

@media(max-width:760px){
  .wrap{padding:0 22px;}
  .pp-hero{padding:80px 0 60px;}
  .pp-band{padding:90px 0;}
  .pp-card{height:auto;min-height:0;max-height:none;}
  .pp-media{position:relative;height:46vh;}
  .pp-content{position:relative;background:#08090c;}
  .pp-content-in{padding:30px 22px 44px;}
  .pp-vind,.pp-index{display:none;}
  .pp-name{opacity:1;transform:none;}
  .pp-keystat{top:62px;left:0;transform:none;padding:0 22px;align-items:flex-end;text-align:right;}
  .pp-keystat-h{font-size:19px;max-width:16ch;}
  .pp-mcaps{display:none;}
  .pp-reviews{position:static;transform:none;left:auto;width:auto;max-width:none;padding:0 22px 30px;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;background:#08090c;margin-top:-6px;}
  .pp-rev{max-width:none;width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .pp-band-track,.pp-band::before{animation:none;}
  .pp-media img,.pp-media video{animation:none!important;transform:none;}
  .pp-card .pp-content *{opacity:1!important;transform:none!important;}
}

/* ============================================================
   awards rolling strip
   ============================================================ */
.pp-awards{position:relative;background:var(--bg);border-top:1px solid var(--line);padding:96px 0 100px;overflow:hidden;}
.pp-awards-head{text-align:center;max-width:720px;margin:0 auto 52px;}
.pp-awards-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-600);}
.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;}
.pp-awards-sub{margin-top:18px;font-size:clamp(15px,1.3vw,17px);font-weight:300;line-height:1.55;color:var(--muted);}
.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);}
.pp-awards-rail{display:flex;align-items:center;gap:64px;width:max-content;animation:ppAwardRoll 42s linear infinite;}
.pp-awards-strip:hover .pp-awards-rail{animation-play-state:paused;}
@keyframes ppAwardRoll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.pp-award{flex:none;display:flex;align-items:center;gap:13px;color:#AEB3BB;transition:color .35s ease,filter .35s ease,transform .35s ease;}
.pp-award .medal{width:26px;height:26px;flex:none;color:inherit;}
.pp-award .medal svg{width:100%;height:100%;}
.pp-award .by{font-size:24px;font-weight:600;letter-spacing:-0.02em;white-space:nowrap;}
.pp-award .rt{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:inherit;opacity:.8;}
.pp-award .rt svg{width:13px;height:13px;}
.pp-award:hover{color:var(--ink);filter:drop-shadow(0 0 16px rgba(249,47,100,.25));transform:translateY(-1px);}
.pp-award:hover .rt{color:var(--rose-600);opacity:1;}
.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){.pp-awards{padding:70px 0 78px;}.pp-awards-rail{gap:44px;}}
@media(prefers-reduced-motion:reduce){.pp-awards-rail{animation:none;}}

/* ============================================================
   small CTA (mini) + footer
   ============================================================ */
.tsb-tile .av{display:grid;place-items:center;background:linear-gradient(135deg,var(--rose-500),var(--violet));overflow:hidden;}
.tsb-tile .av span{font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff;}
.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);}
.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);}}
.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%);}
.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));}
.pp-mini-in{position:relative;z-index:2;max-width:880px;padding:0 40px;display:flex;flex-direction:column;align-items:center;}
.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);}
.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;}
.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;}
.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;}
.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);}
.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;}
.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;}
.pp-mini-btn .ar svg{width:18px;height:18px;}
.pp-mini-btn:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(228,18,82,.34);}
.pp-mini-btn:hover .ar{transform:translateX(3px) rotate(-8deg);}
@media(max-width:760px){.pp-mini{min-height:0;padding:90px 0;}.pp-mini-btn{width:100%;justify-content:center;}}
@media(prefers-reduced-motion:reduce){.pp-mini-aura{animation:none;}}

.pp-foot{background:#0B0C0E;color:rgba(255,255,255,.7);padding:64px 0 30px;}
.pp-foot-in{display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap;}
.pp-foot-brand img{height:30px;width:auto;}
.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);}
.pp-foot-cols{display:flex;gap:60px;flex-wrap:wrap;}
.pp-foot-cols b{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;margin-bottom:14px;}
.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;}
.pp-foot-cols a:hover{color:var(--rose-400);}
.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){.pp-mini-in{padding:26px;}.pp-mini .pp-cta-btn{width:100%;justify-content:center;}}

/* ============================================================
   4 · IN THE WORKS AT WDI
   ============================================================ */
.iw-sec{position:relative;padding:110px 0 130px;background:var(--bg-2);border-top:1px solid var(--line);}
.iw-head{text-align:center;max-width:720px;margin:0 auto 56px;}
.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);}
.iw-head .eyebrow::before,.iw-head .eyebrow::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--rose-400));}
.iw-head .eyebrow::after{background:linear-gradient(90deg,var(--rose-400),transparent);}
.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);}
.iw-head h2 .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
.iw-head p{margin-top:18px;font-size:16px;font-weight:300;line-height:1.55;color:var(--muted);}

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

/* co-brand card */
.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);}
.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);}
.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%);}
.iw-item:hover .iw-card{border-color:var(--rose-300);transform:translateY(-5px);box-shadow:0 24px 50px rgba(11,12,14,.16);}
.iw-item:hover .iw-card::before{transform:scale(1.08);}

/* industry tag */
.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 */
.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);}
.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 */
.iw-lock{position:relative;z-index:1;display:flex;align-items:center;gap:18px;}
.iw-lock .wdi{height:30px;width:auto;}
.iw-lock .x{font-size:18px;font-weight:300;color:rgba(255,255,255,.45);}
.iw-lock .proj{font-size:24px;font-weight:700;letter-spacing:-0.02em;color:#fff;}
.iw-lock .proj em{font-style:normal;color:var(--hue,#39E07B);}

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

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


/* ===== Testimonials (Variant B, copied) ===== */
.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);}
.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);}
.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;}
.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;}

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


/* ============================================================
   WDI — Portfolio  (Variants A + B)  — image-forward, light
   ============================================================ */
#wdi-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

.pf-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
.pf-vtag b{color:var(--ink);font-weight:500;}
.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;}

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

/* header */
.pf-head{max-width:880px;position:relative;z-index:2;}
.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);}
.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);}
.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;}
.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;}
.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) */
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 */
.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;}
.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);}
.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;}
.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;}
.pf-link svg{width:16px;height:16px;color:var(--rose-600);transition:transform .25s;}
.pf-link:hover{color:var(--rose-600);gap:12px;}
.pf-link:hover svg{transform:translateX(3px);}

/* section CTA */
.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);}
.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));}
.pf-cta-h{font-size:clamp(20px,2vw,27px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
.pf-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:62ch;}
.pf-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}
.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;}
.pf-btn svg{width:16px;height:16px;transition:transform .25s;}
.pf-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
.pf-btn:hover svg{transform:translateX(3px);}
.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;}
.pf-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

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

/* ============================================================
   VARIANT A — EDITORIAL IMAGE GRID
   ============================================================ */
.pfa-grid{margin-top:58px;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.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);
}
#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);}
.pfa-card:hover{border-color:var(--rose-300);box-shadow:0 26px 64px rgba(11,12,14,.12);transform:translateY(-5px);}
#portfolio-a.in .pfa-card:hover{transform:translateY(-5px);}

/* media slot */
.pfa-media{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0c0d11;}
.pfa-media image-slot{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.pfa-card:hover .pfa-media image-slot{transform:scale(1.04);}
.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;}
.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 */
.pfa-media-foot{position:absolute;left:18px;bottom:18px;z-index:3;display:flex;align-items:center;gap:10px;}
.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);}
.pfa-mico svg{width:21px;height:21px;}

/* body */
.pfa-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1;}
.pfa-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;font-weight:500;color:var(--muted);}
.pfa-meta .sep{color:var(--line-2);}
.pfa-meta .ind{color:var(--rose-600);}
.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;}
.pfa-desc{margin-top:12px;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-2);}
.pfa-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;}
.pfa-card:hover .pf-tag{border-color:var(--line-2);background:#fff;}
.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.
   ============================================================ */
.pfb-stack{margin-top:68px;position:relative;z-index:2;display:flex;flex-direction:column;gap:46px;}

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

.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;
}
.pfb-card.rise{opacity:1;transform:none;box-shadow:0 36px 90px rgba(11,12,14,.10);}
.pfb-card:hover{border-color:var(--rose-300);box-shadow:0 48px 100px rgba(228,18,82,.15);}
.pfb-card.flip{grid-template-columns:1.14fr 0.86fr;}
.pfb-card.flip .pfb-info{order:2;}

/* left: brand info on a soft rose-tinted field */
.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;}
.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;}
.pfb-brandrow{display:flex;align-items:center;gap:16px;position:relative;}
.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;}
.pfb-card:hover .pfb-logo{transform:translateY(-3px);box-shadow:0 14px 30px rgba(228,18,82,.16);}
.pfb-logo svg{width:33px;height:33px;}
.pfb-brandname{font-size:30px;font-weight:600;letter-spacing:-0.025em;color:var(--ink);line-height:1.02;}
.pfb-brandcat{margin-top:5px;font-size:12.5px;font-weight:500;color:var(--rose-600);letter-spacing:.02em;}
.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 */
.pfb-stats{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;}
.pfb-statcell{padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:border-color .35s,transform .35s,box-shadow .35s;}
.pfb-card:hover .pfb-statcell{border-color:var(--line-2);}
.pfb-statcell:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,12,14,.07);}
.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;}
.pfb-stat-lbl{margin-top:11px;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--muted);}
.pfb-info-foot{margin-top:auto;padding-top:36px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:relative;}
.pfb-info-foot .pf-link{font-size:15px;}

/* right: generous product image */
.pfb-shot{position:relative;min-height:560px;background:#0c0d11;overflow:hidden;}
.pfb-shot image-slot{position:absolute;inset:0;transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.pfb-card:hover .pfb-shot image-slot{transform:scale(1.045);}
.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;}
.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);}
.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);}
.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.
   ============================================================ */
.pfc-sec{padding:0;border-top:1px solid var(--line);background:#08090c;}
.pfc-head{max-width:var(--maxw);margin:0 auto;padding:104px 40px 56px;}
.pfc-head .pf-eyebrow{color:var(--rose-400);}
.pfc-head .pf-h{color:#fff;}
.pfc-head .pf-intro{color:rgba(255,255,255,.74);}
.pfc-head .pf-sub{color:rgba(255,255,255,.5);}

.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);}
.pfc-panel image-slot{position:absolute;inset:0;transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.pfc-panel.in image-slot{transform:scale(1.02);}
.pfc-panel:hover image-slot{transform:scale(1.06);}
/* cinematic scrim: dark bottom + slight top */
.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 */
.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%);}

.pfc-content{position:absolute;left:0;right:0;bottom:0;z-index:2;}
.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;}
.pfc-left{max-width:760px;}
.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;}
.pfc-eyebrow .n{color:var(--rose-400);}
.pfc-eyebrow .bar{width:30px;height:1px;background:rgba(255,255,255,.4);}
.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;}
.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;}
.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;}
.pfc-stat{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:#fff;}
.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);}
.pfc-stat .sep{color:rgba(255,255,255,.3);margin:0 4px;}
.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;}
.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;}
.pfc-btn svg{width:16px;height:16px;transition:transform .3s;}
.pfc-btn:hover{background:var(--rose-600);border-color:var(--rose-600);transform:translateY(-2px);gap:16px;}
.pfc-btn:hover svg{transform:translateX(3px);}
/* reveal when panel in view */
.pfc-panel.in .pfc-eyebrow,.pfc-panel.in .pfc-title,.pfc-panel.in .pfc-line,.pfc-panel.in .pfc-meta,.pfc-panel.in .pfc-cta{opacity:1;transform:none;}
/* corner index marker */
.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;}
.pfc-index b{color:#fff;}

/* dark CTA strip to close the section */
.pfc-foot{max-width:var(--maxw);margin:0 auto;padding:74px 40px 104px;text-align:center;}
.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;}
.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;}
.pfc-foot-actions{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.pfc-foot .pfc-btn.solid{background:#fff;color:var(--ink);border-color:#fff;}
.pfc-foot .pfc-btn.solid:hover{background:var(--rose-600);color:#fff;border-color:var(--rose-600);}

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

/* ---- header ---- */
.pfd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.pfd-head-l{max-width:760px;}
.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;}
.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);}
.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;}
.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;}
.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;}
.pfd-head-cta svg{width:16px;height:16px;transition:transform .25s;}
.pfd-head-cta:hover{transform:translateY(-2px);background:#F92F64;color:#fff;box-shadow:0 14px 34px rgba(249,47,100,.34);}
.pfd-head-cta:hover svg{transform:translateX(3px);}

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

/* ---- card ---- */
.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;
}
.pfd-card.rise{opacity:1;transform:none;}
.pfd-card:hover{border-color:rgba(255,255,255,.2);box-shadow:0 26px 60px rgba(0,0,0,.5);}

/* video layer */
.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);}
.pfd-card:hover .pfd-vid{transform:scale(1.1);}
/* photo tiles - same fill as video, gentle hover zoom */
.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);}
.pfd-card:hover .pfd-photo{transform:scale(1.1);}
.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;}
.pfd-card:hover .pfd-scrim{opacity:.82;}
/* brand-tinted edge wash that intensifies on hover */
.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;}
.pfd-card:hover .pfd-wash{opacity:.85;}

/* top - logo + wordmark */
.pfd-top{position:relative;z-index:3;display:flex;align-items:center;gap:11px;padding:20px 22px;}
.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;}
.pfd-logo svg{width:19px;height:19px;}
.pfd-name{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.pfd-card:nth-child(1) .pfd-name,
.pfd-card:nth-child(2) .pfd-name{font-size:25px;}

/* bottom - category, stats, CTA */
.pfd-bot{position:relative;z-index:3;padding:0 22px 20px;display:flex;flex-direction:column;}
.pfd-cat{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.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;}
.pfd-card:hover .pfd-stats{max-height:0;opacity:0;margin-top:0;}

/* key impact - revealed on hover as a quiet, smartly-set line */
.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;
}
.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));}
.pfd-impact-k{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.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);}
.pfd-card:hover .pfd-impact{max-height:120px;opacity:1;margin-top:13px;}
.pfd-card:nth-child(1) .pfd-impact-t,
.pfd-card:nth-child(2) .pfd-impact-t{font-size:18px;}
.pfd-stat{display:flex;flex-direction:column;gap:2px;}
.pfd-stat b{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1;}
.pfd-stat span{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.6);letter-spacing:.01em;}
.pfd-card:nth-child(1) .pfd-stat b,
.pfd-card:nth-child(2) .pfd-stat b{font-size:25px;}

.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;
}
.pfd-cta svg{width:15px;height:15px;transition:transform .25s;}
.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);}
.pfd-card:hover .pfd-cta svg{transform:translateX(3px);}

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

/* ---- responsive ---- */
@media (max-width:1080px){
  .pfd-grid{grid-auto-rows:248px;}
  .pfd-card:nth-child(1){grid-column:1 / 13;grid-row:1;}
  .pfd-card:nth-child(2){grid-column:1 / 7; grid-row:2 / 4;}
  .pfd-card:nth-child(3){grid-column:7 / 13;grid-row:2;}
  .pfd-card:nth-child(4){grid-column:7 / 13;grid-row:3;}
  .pfd-card:nth-child(5){grid-column:1 / 7; grid-row:4;}
  .pfd-card:nth-child(6){grid-column:7 / 13;grid-row:4;}
}
@media (max-width:640px){
  .pfd-sec{padding:72px 0 84px;}
  .pfd-grid{grid-template-columns:1fr;grid-auto-rows:230px;gap:12px;}
  .pfd-card:nth-child(n){grid-column:1 / 2 !important;grid-row:auto !important;}
  .pfd-head-cta{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .pfd-card{opacity:1;transform:none;transition:none;}
  .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).
   ============================================================ */
.tsm-sec{position:relative;padding:108px 0 128px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden;}
.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%);}
.tsm-sec>*{position:relative;z-index:1;}

/* ---------- header ---------- */
.tsm-head{text-align:center;max-width:760px;margin:0 auto 58px;}
.tsm-head .ts-eyebrow{justify-content:center;}
.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);}
.tsm-head .ts-h .accent{color:var(--ink);position:relative;white-space:nowrap;}
.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));}
.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) ---------- */
.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);}
.tsm-row{position:relative;overflow:visible;}
.tsm-track{display:flex;gap:20px;width:max-content;padding:14px 10px;will-change:transform;}
.tsm-track.left{animation:tsmScroll var(--dur,60s) linear infinite;}
.tsm-track.right{animation:tsmScroll var(--dur,60s) linear infinite reverse;}
@keyframes tsmScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.tsm-row:hover .tsm-track{animation-play-state:paused;}
.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;}
.tsm-row:hover .tsm-card:hover{opacity:1;}

/* ---------- card ---------- */
.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;}
.tsm-card.sz-s{width:312px;}
.tsm-card.sz-m{width:400px;}
.tsm-card.sz-l{width:512px;}
.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 */
.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;}
.tsm-card[data-th="dark"] .tsm-mark{color:rgba(255,255,255,.12);}
.tsm-card:hover .tsm-mark{color:var(--rose-300);}

/* stars */
.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);}
.tsm-stars svg{width:13px;height:13px;fill:var(--rose-500);}
.tsm-card[data-th="dark"] .tsm-stars svg{fill:var(--rose-400);}
.tsm-card:hover .tsm-stars{opacity:1;transform:none;}

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

/* typing caret (subtle pink) */
.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;}
.tsm-card[data-th="dark"] .tsm-caret{background:var(--rose-400);}
.tsm-caret.done{animation:none;opacity:0;}
@keyframes tsmCaret{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}

/* footer */
.tsm-foot{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid var(--line);}
.tsm-card[data-th="dark"] .tsm-foot{border-top-color:rgba(255,255,255,.10);}
.tsm-person{display:flex;align-items:center;gap:13px;}
.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;}
.tsm-card:hover .tsm-photo{filter:grayscale(0) contrast(1);transform:scale(1.06);box-shadow:0 8px 18px rgba(11,12,14,.2);}
.tsm-meta{min-width:0;}
.tsm-name{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tsm-card[data-th="dark"] .tsm-name{color:#fff;}
.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%;}
.tsm-card[data-th="dark"] .tsm-role{color:rgba(255,255,255,.5);}

/* country + industry chips — clean, frosted, modern */
.tsm-tags{display:flex;flex-wrap:wrap;gap:6px;}
.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);}
.tsm-chip.geo{color:var(--ink);}
/* circular mini-flag */
.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);}
.tsm-chip.ind{padding-left:11px;}
.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 */
.tsm-card:hover .tsm-chip{transform:translateY(-1px);}
.tsm-card:hover .tsm-chip.geo{box-shadow:inset 0 0 0 1px rgba(11,12,14,.13);}
.tsm-card:hover .tsm-cflag{transform:scale(1.06);}
.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);}
.tsm-card:hover .tsm-chip.ind .tsm-idot{box-shadow:0 0 0 3px rgba(249,47,100,.22);}
/* dark chips */
.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);}
.tsm-card[data-th="dark"] .tsm-chip.geo{color:#fff;}
.tsm-card[data-th="dark"] .tsm-cflag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.tsm-card[data-th="dark"]:hover .tsm-chip.geo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);}
.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 */
.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);}
.tsm-card[data-th="dark"]:hover{box-shadow:0 30px 64px -22px rgba(0,0,0,.62);border-color:rgba(255,255,255,.24);}
.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);}
.tsm-card:hover::before{transform:scaleX(1);}

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

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

/* responsive */
@media (max-width:760px){
  .tsm-sec{padding:78px 0 92px;}
  .tsm-rows{gap:14px;}
  .tsm-track{gap:14px;}
  .tsm-card{height:272px;padding:24px 24px 22px;}
  .tsm-card.sz-s{width:270px;}
  .tsm-card.sz-m{width:326px;}
  .tsm-card.sz-l{width:384px;}
  .tsm-pull{font-size:25px;}
  .tsm-quote,.tsm-card.sz-l .tsm-quote{font-size:14.5px;}
  .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 */

.lp-sec{position:relative;padding:clamp(80px,9vw,132px) 0;background:var(--bg);overflow:hidden;}
.lp-sec.alt{background:var(--page);}

/* shared header cluster ---------------------------------------- */
.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);}
.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);}}
.lp-eyebrow-c{justify-content:center;}
.lp-head{max-width:820px;margin:0 auto 56px;text-align:center;}
.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;}
.lp-h .amp,.lp-h .grad,.lp-h .mut{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:inherit;}
.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);}
.lp-supp{margin:16px auto 0;max-width:66ch;font-size:15px;font-weight:300;line-height:1.62;color:var(--muted);}

/* buttons ------------------------------------------------------ */
.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;}
.lp-btn .ar{display:inline-flex;width:20px;height:20px;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.lp-btn .ar svg{width:100%;height:100%;}
.lp-btn:hover .ar{transform:translateX(4px);}
.lp-btn-primary{background:var(--ink);color:#fff;box-shadow:0 14px 34px rgba(11,12,14,.16);}
.lp-btn-primary:hover{background:var(--rose-500);color:#fff;transform:translateY(-2px);box-shadow:0 20px 44px rgba(228,18,82,.34);}
.lp-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.lp-btn-ghost:hover{border-color:var(--rose-500);color:var(--rose-600);transform:translateY(-2px);}
.lp-btn-light{background:#fff;color:var(--ink);box-shadow:0 16px 40px rgba(0,0,0,.28);}
.lp-btn-light:hover{background:var(--rose-500);color:#fff;transform:translateY(-2px);box-shadow:0 20px 46px rgba(228,18,82,.4);}
.lp-btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);}
.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);}
.lp-btn-big{font-size:17px;padding:20px 46px;gap:14px;}
.lp-btn-big .ar{width:22px;height:22px;}
.lp-inline-cta{margin-top:52px;display:flex;justify-content:center;}

/* standalone nav ---------------------------------------------- */
/* top contact banner (matches nav variant A/v3) */
.nva3-topbar{position:relative;background:#0B0C0E;color:rgba(255,255,255,.82);font-size:13px;overflow:hidden;}
.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%);}}
.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;}}
.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;}
.nva3-tb-note{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.74);font-weight:300;}
.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);}}
.nva3-tb-note svg{width:15px;height:15px;color:var(--rose-400);flex:none;}
.nva3-tb-right{display:flex;align-items:center;gap:14px;}
.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;}
.nva3-tb-ph:hover{color:#fff;}
.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;}
.nva3-tb-sep{width:1px;height:16px;background:rgba(255,255,255,.16);}
.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;}
.nva3-tb-mail svg{width:14px;height:14px;color:var(--rose-300);}
.nva3-tb-mail:hover{background:var(--rose-600);border-color:var(--rose-600);transform:translateY(-1px);}
@media(max-width:860px){
  .nva3-tb-note{display:none;}
  .nva3-tb-in{justify-content:center;height:auto;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:10px;}
}
@media(prefers-reduced-motion:reduce){.nva3-topbar::before,.nva3-topbar::after{animation:none;}.nva3-tb-note .lvdot{animation:none;}}
.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);}
.lpnav-in{max-width:1300px;margin:0 auto;padding:0 40px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.lpnav-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;}
.lpnav-mark{width:30px;height:30px;display:block;}
.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;}
.lpnav-name em{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:-0.005em;}
.lpnav-cta{display:flex;align-items:center;gap:12px;}
.lpnav-btn{padding:11px 20px;font-size:14px;}

/* standalone footer ------------------------------------------- */
.lpfoot{position:relative;overflow:hidden;background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;padding:clamp(58px,7vw,90px) 0 36px;}
.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%);}
.lpfoot-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,96px);align-items:start;}
.lpfoot-l{max-width:none;}
.lpfoot-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;}
.lpfoot-mark{width:30px;height:30px;display:block;}
.lpfoot-name{display:inline-flex;align-items:baseline;gap:8px;font-size:19px;font-weight:700;letter-spacing:-0.02em;color:#fff;}
.lpfoot-name em{font-style:normal;font-size:13px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:-0.005em;}
.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;}
.lpfoot-r{min-width:min(440px,44vw);}
.lpfoot-cta-h{font-size:clamp(25px,2.6vw,34px);font-weight:600;letter-spacing:-0.03em;color:#fff;}
.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;}
.lpfoot-form{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;}
.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;}
.lpfoot-input::placeholder{color:rgba(255,255,255,.45);}
.lpfoot-input:focus{border-color:var(--rose-400);background:rgba(255,255,255,.1);}
.lpfoot-formbtn{flex:none;height:54px;font-size:15.5px;padding:0 26px;}
.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;}
.lpfoot-sub:hover{color:var(--rose-300);border-color:var(--rose-400);}
.lpfoot-recog{display:none;}
.lpfoot-badges{margin-top:26px;display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);flex-wrap:wrap;}
.lpfoot-badges img{height:88px;width:auto;max-width:100%;object-fit:contain;opacity:.94;transition:opacity .3s,transform .3s;}
.lpfoot-badges img[src*="goodfirms"]{height:64px;}
.lpfoot-badges img:hover{opacity:1;transform:translateY(-3px);}
.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;}
.lpfoot-contact:hover{border-color:var(--rose-400);background:rgba(249,47,100,.08);transform:translateY(-2px);}
.lpfoot-contact-l{display:flex;flex-direction:column;gap:3px;}
.lpfoot-contact-k{font-size:14px;font-weight:600;letter-spacing:-0.01em;color:#fff;}
.lpfoot-contact-sub{font-size:12.5px;font-weight:300;color:rgba(255,255,255,.55);}
.lpfoot-contact-r{display:flex;align-items:center;gap:10px;padding-left:20px;border-left:1px solid rgba(255,255,255,.14);}
.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;}
.lpfoot-contact-ic svg{width:17px;height:17px;}
.lpfoot-contact-num{font-size:16px;font-weight:600;letter-spacing:-0.01em;color:#fff;white-space:nowrap;}
.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 ------------------------------------------- */
.lp-eco{position:relative;background:#F4F5F7;padding:clamp(50px,6vw,84px) 0;overflow:hidden;}
.lp-eco-head{text-align:center;max-width:760px;}
.lp-eco-head .lp-eyebrow{justify-content:center;}
.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;}
.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);}
.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);}
.lp-eco-track{display:flex;align-items:center;gap:64px;width:max-content;animation:lpEco 48s linear infinite;}
.lp-eco-strip:hover .lp-eco-track{animation-play-state:paused;}
@keyframes lpEco{to{transform:translateX(-50%);}}
.lp-eco-logo{flex:none;display:flex;align-items:center;white-space:nowrap;}
.lp-eco-logo img{height:38px;width:auto;object-fit:contain;filter:grayscale(1) opacity(.62);transition:filter .35s,transform .35s;}
.lp-eco-logo:hover img{filter:grayscale(0) opacity(1);transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){.lp-eco-track{animation:none;flex-wrap:wrap;justify-content:center;}}

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

/* ============================================================
   1 · HERO
   ============================================================ */
.lp-hero{position:relative;padding:clamp(120px,14vw,180px) 0 clamp(80px,9vw,120px);text-align:center;background:var(--bg);overflow:hidden;}
.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%);}
.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%);}
.lp-hero-in{position:relative;z-index:2;}
/* mouse-follow spotlight */
.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%);}
.lp-hero:hover .lp-hero-spot{opacity:1;}
/* rising electrical pulses */
.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%);}
.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){.lp-hero-pulses{display:none;}.lp-hero-spot{display:none;}}

/* ============================================================
   1.5 · INTERSTITIAL STATEMENT BAND (near-black)
   ============================================================ */
.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;}
.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%);}
.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%);}
.lp-band-in{position:relative;z-index:2;max-width:940px;margin:0 auto;}
.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;}
.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;}
.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;}
.lp-hero-h .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
.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);}
.lp-hero-sub{margin:16px auto 0;max-width:60ch;font-size:15.5px;font-weight:300;line-height:1.6;color:var(--muted);}
.lp-hero-cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.lp-hero-trust{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,38px);flex-wrap:wrap;}
.lp-hero-trust .t b{font-size:26px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
.lp-hero-trust .t span{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--muted);}
.lp-hero-trust .d{width:1px;height:32px;background:var(--line-2);}

/* ============================================================
   2 · FORM SECTION (reuses ct-form-sec + launch-form-v2)
   ============================================================ */
.lp-form-sec{background:var(--bg);padding-bottom:clamp(40px,6vw,80px);}
.lp-form-head{text-align:center;max-width:760px;margin:clamp(40px,5vw,64px) auto clamp(24px,3vw,36px);}
.lp-form-head .lp-eyebrow{justify-content:center;}
.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
   ============================================================ */
.lp-problem{position:relative;isolation:isolate;overflow:hidden;}
.lp-problem .wrap{position:relative;z-index:2;}
.lp-prob-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;}
.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);}
.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);}
.lp-prob.in{opacity:1;transform:none;}
.lp-prob:nth-child(even){background:rgba(15,17,20,.028);}
.lp-prob{border-radius:14px;padding-left:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px);}
.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);}
.lp-prob:hover::before{transform:scaleY(1);}
.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);}
.lp-prob:hover .n{transform:translateX(4px);}
.lp-prob-c{flex:1;min-width:0;}
.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;}
.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){.lp-prob{opacity:1;transform:none;}}
.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);}
.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)
   ============================================================ */
.lp-diag{background:#F4F5F7;}
.lp-diag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
/* header cell (first grid slot) */
.lp-diag-head{display:flex;flex-direction:column;padding:8px 12px 8px 0;}
.lp-diag-head .lp-eyebrow{justify-content:flex-start;}
.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);}
.lp-diag-sub{margin-top:16px;font-size:15px;font-weight:300;line-height:1.6;color:var(--muted);max-width:36ch;}
.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;}
.lp-diag-link svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.lp-diag-link:hover{color:var(--rose-500);gap:13px;}
.lp-diag-link:hover svg{transform:translateX(3px);}
/* cards - 3D flip on hover */
.lp-diag-card{position:relative;height:320px;border-radius:22px;perspective:1400px;background:transparent;border:none;}
.lp-diag-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.5,.05,.2,1);}
.lp-diag-card:hover .lp-diag-inner,.lp-diag-card:focus-within .lp-diag-inner{transform:rotateY(180deg);}
.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);}
.lp-diag-back{transform:rotateY(180deg);}
.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);}
.lp-diag-ic svg{width:26px;height:26px;}
/* back face: mid list sits below the header, not pinned to bottom */
.lp-diag-back .lp-diag-mid{margin-top:22px;padding-top:0;}
.lp-diag-front .lp-diag-mid{margin-top:auto;padding-top:24px;}
.lp-diag-t{font-size:20px;font-weight:600;letter-spacing:-0.025em;line-height:1.12;color:var(--ink);}
.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 */
.lp-diag-bhead{display:flex;align-items:center;gap:14px;}
.lp-diag-bt{font-size:16px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;color:var(--ink);}
.lp-diag-back .lb{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.lp-diag-back ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:9px;}
.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;}
.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));}
.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 */
.lp-diag-card-ai .lp-diag-face{background:linear-gradient(150deg,var(--rose-500),var(--rose-600));border-color:transparent;color:#fff;}
.lp-diag-card-ai .lp-diag-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff;}
.lp-diag-card-ai .lp-diag-t{color:#fff;}
.lp-diag-card-ai .lp-diag-best{color:rgba(255,255,255,.82);}
.lp-diag-card-ai .lp-diag-bt{color:#fff;}
.lp-diag-card-ai .lp-diag-back .lb{color:rgba(255,255,255,.75);}
.lp-diag-card-ai .lp-diag-back li{color:#fff;}
.lp-diag-card-ai .lp-diag-back li::before{background:#fff;}
.lp-diag-card-ai .lp-diag-back li::after{border-color:var(--rose-600);}
@media (prefers-reduced-motion:reduce){
  .lp-diag-inner{transition:none;}
}

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

/* stage card */
.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);}
.piw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.piw-track-under path{opacity:0;transition:opacity .5s ease;}
.piw-stage.go .piw-track-under path{opacity:1;}
.piw-track path{stroke-dashoffset:100;stroke-dasharray:100;filter:drop-shadow(0 1px 1px rgba(11,12,14,.04));}
.piw-stage.go .piw-track path{animation:piwDraw 1.3s cubic-bezier(.35,0,.15,1) forwards;}
.piw-stage.go .piw-track #pw2{animation-delay:.12s;}
.piw-stage.go .piw-track #pw3{animation-delay:.24s;}
.piw-stage.go .piw-track #pw4{animation-delay:.36s;}
.piw-stage.go .piw-track #pwOut{animation-delay:1s;}
@keyframes piwDraw{to{stroke-dashoffset:0;}}
.piw-junc{opacity:0;transition:opacity .5s ease;}
.piw-stage.go .piw-junc{opacity:1;transition-delay:.7s;}
.piw-dots{opacity:0;transition:opacity .7s ease;}
.piw-stage.go .piw-dots{opacity:1;transition-delay:1s;}
.piw-dots circle{filter:drop-shadow(0 3px 6px rgba(11,12,14,.16));}

/* input chips */
.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);}
.piw-stage.go .piw-chip{opacity:1;transform:translate(-50%,-50%);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.piw-stage.go .piw-chip:nth-of-type(2){transition-delay:.09s;}
.piw-stage.go .piw-chip:nth-of-type(3){transition-delay:.18s;}
.piw-stage.go .piw-chip:nth-of-type(4){transition-delay:.27s;}
.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 */
.piw-core{position:absolute;transform:translate(-50%,-50%);z-index:4;display:grid;place-items:center;
  opacity:0;scale:.82;}
.piw-stage.go .piw-core{opacity:1;scale:1;transition:opacity .7s ease .6s,scale .9s cubic-bezier(.2,.7,.2,1) .6s;}
.piw-core-ring{position:absolute;width:118px;height:118px;border-radius:50%;border:1.5px solid rgba(228,18,82,.4);}
.piw-core-ring.r2{width:118px;height:118px;}
.piw-stage.go .piw-core-ring{animation:piwRing 3.2s cubic-bezier(.2,.6,.3,1) infinite;}
.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;}}
.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);}
.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);}}
.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);}
.piw-core-ic svg{width:19px;height:19px;color:var(--rose-300);}
.piw-core-txt{font-size:15px;font-weight:600;letter-spacing:-0.02em;}

/* output node */
.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;}
.piw-stage.go .piw-out{opacity:1;transition:opacity .7s ease 1.1s;}
.piw-out-k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);}
.piw-out-t{font-size:16px;font-weight:600;letter-spacing:-0.02em;}

/* note + cta */
.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);}
.piw-cta{margin-top:26px;display:flex;justify-content:center;}
@media(prefers-reduced-motion:reduce){
  .piw-track path{stroke-dashoffset:0;animation:none;}
  .piw-track-under path,.piw-junc,.piw-dots,.piw-chip,.piw-core,.piw-out{opacity:1;transform:translate(-50%,-50%);scale:1;}
  .piw-core-ring{animation:none;}
  .piw-stage.go .piw-core-pill{animation:none;}
}

/* ============================================================
   9.5 · AI + HUMAN CONTROL - sticky header + numbered cards (GitBook-style)
   ============================================================ */
.lp-gov{background:#fff;}
.lp-gov-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(44px,7vw,120px);align-items:start;}
.lp-gov-l{position:sticky;top:104px;}
.lp-gov-l .lp-h{text-align:left;margin-top:18px;}
.lp-gov-l .lp-aeo{margin-top:22px;}
.lp-gov-l .lp-supp{margin-top:18px;}
.lp-gov-cta{margin-top:30px;}
/* cards column */
.lp-gov-r{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);}
.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);}
.lp-gov-card.in{opacity:1;transform:none;}
.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);}
.lp-gov-card:hover::before{transform:scaleY(1);}
.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);}
.lp-gov-card:hover .lp-gov-n{transform:translateX(3px);}
.lp-gov-c{padding-top:6px;}
.lp-gov-c h3{font-size:clamp(19px,1.7vw,23px);font-weight:600;letter-spacing:-0.025em;color:var(--ink);}
.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){.lp-gov-card{opacity:1;transform:none;}}

/* ============================================================
   9.25 · AI vs WDI COMPARISON - animated table
   ============================================================ */
.lp-cmp{background:var(--bg-2);}
.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 */
.lp-cmp-headrow,.lp-cmp-row{display:grid;grid-template-columns:var(--cat) var(--col) var(--col);}
.lp-cmp-headrow{border-bottom:1px solid var(--line);background:var(--bg-2);}
.lp-cmp-cat-h,.lp-cmp-col-h{padding:18px 24px;font-size:13px;font-weight:700;letter-spacing:.03em;display:flex;align-items:center;gap:9px;}
.lp-cmp-cat-h{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;}
.lp-cmp-col-h.ai{color:var(--ink-2);}
.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);}
.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);}
.lp-cmp-col-h.wdi .mark{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--rose-500);color:#fff;}
.lp-cmp-col-h.wdi .mark svg{width:12px;height:12px;}
/* rows */
.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);}
.lp-cmp-row:first-of-type{border-top:none;}
.lp-cmp-row.in{opacity:1;transform:none;}
.lp-cmp-row:hover{background:var(--bg-2);}
.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);}
.lp-cmp-cat-n{font-size:12px;font-weight:600;color:var(--faint);font-feature-settings:"tnum" 1;min-width:18px;}
.lp-cmp-cell{display:flex;gap:12px;padding:24px 26px;border-left:1px solid var(--line);align-items:flex-start;}
.lp-cmp-cell .ic{flex:none;width:20px;height:20px;display:grid;place-items:center;margin-top:1px;}
.lp-cmp-cell .ic svg{width:17px;height:17px;}
.lp-cmp-cell.ai .ic{color:#D9A400;}
.lp-cmp-cell.ai p{color:var(--muted);}
.lp-cmp-cell.wdi{background:rgba(249,47,100,.028);border-left:1px solid rgba(249,47,100,.14);}
.lp-cmp-cell.wdi .ic{color:var(--rose-600);}
.lp-cmp-cell.wdi p{color:var(--ink-2);}
.lp-cmp-cell p{margin:0;font-size:14px;font-weight:300;line-height:1.55;letter-spacing:-0.005em;color:var(--muted);}
.lp-cmp-row:hover .lp-cmp-cell.wdi{background:rgba(249,47,100,.05);}
/* cta strip */
.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;}
.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%);}
.lp-cmp-cta-l{position:relative;z-index:1;flex:0 1 620px;}
.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;}
.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;}
.lp-cmp-cta .lp-btn{position:relative;z-index:1;flex:none;}
.lp-cmp-cta .lp-btn-primary{border:1.5px solid rgba(255,255,255,.85);}
.lp-cmp-cta .lp-btn-primary:hover{border-color:var(--rose-500);}
@media(prefers-reduced-motion:reduce){.lp-cmp-row{opacity:1;transform:none;}}

/* ============================================================
   4 · SOLUTION PILLARS
   ============================================================ */
.lp-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.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;}
.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);}
.lp-pillar:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 20px 46px rgba(11,12,14,.09);}
.lp-pillar:hover::before{width:100%;}
.lp-pillar.span2{grid-column:span 2;}
.lp-pillar-n{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--rose-500);font-feature-settings:"tnum" 1;}
.lp-pillar h3{margin-top:16px;font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
.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 --- */
.lp-prob-c{display:flex;flex-direction:column;gap:10px;min-width:0;}
.lp-prob-sub{font-size:14px;font-weight:300;line-height:1.6;color:var(--muted);letter-spacing:-0.004em;}
.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;}
.lp-prob-solve svg{width:15px;height:15px;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.lp-prob.in:hover .lp-prob-solve,.lp-prob:focus-within .lp-prob-solve{max-height:52px;opacity:1;transform:none;pointer-events:auto;margin-top:6px;padding:10px 17px;}
.lp-prob-solve:hover{background:var(--rose-600);}
.lp-prob-solve:hover svg{transform:translateX(3px);}
@media(prefers-reduced-motion:reduce){.lp-prob-solve{transition:opacity .2s ease;}}
.lp-prob-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:56px;}
.lp-prob-cta-wrap .lp-prob-close{margin:0;}
.lp-prob-cta span:first-child{white-space:normal;}

/* ============================================================
   4 · SOLUTION - editorial big-text rows + stock imagery (dark)
   ============================================================ */
.lp-sol{background:#08090B;color:#fff;position:relative;isolation:isolate;overflow:hidden;}
.lp-sol .wrap{position:relative;z-index:2;}
.lp-sol .lp-h{color:#fff;}
.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;}
.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;}}
.lp-btn-ondark{background:#fff;color:var(--ink);border-color:#fff;}
.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 */
.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);}
.lp-sol-head2 .lp-h{margin-top:18px;text-align:left;}
.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 */
.lp-solr-rows{margin-top:clamp(18px,2.6vw,30px);border-top:1px solid rgba(255,255,255,.1);}
.lp-solr{position:relative;border-bottom:1px solid rgba(255,255,255,.1);overflow:hidden;}
.lp-solr-main{transform:translateY(102%);transition:transform .85s cubic-bezier(.4,0,.15,1);}
.lp-solr.in .lp-solr-main{transform:translateY(0);}
.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;}
.lp-solr:hover::before{width:3px;}
.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);}
.lp-solr-l{display:flex;align-items:flex-start;gap:16px;}
.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;}
.lp-solr:hover .lp-solr-idx{color:var(--rose-400);}
.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;}
.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;}
.lp-solr:hover .lp-solr-name{color:var(--rose-300);}
.lp-solr-mid{min-width:0;}
.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;}
.lp-solr-subs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.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;}
.lp-solr:hover .lp-solr-subs i{border-color:rgba(255,255,255,.22);color:#fff;}
.lp-solr-thumb{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#0A0B0E;border:1px solid rgba(255,255,255,.1);}
.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;}
.lp-solr:hover .lp-solr-thumb img{transform:scale(1.06);filter:saturate(1.02) brightness(.74);}
.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));}
.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){.lp-solr-main{transform:none;transition:none;}}

/* ============================================================
   5 · PRODUCT PATHS
   ============================================================ */
.lp-path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.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;}
.lp-sec:not(.alt) .lp-path{background:var(--bg-2);}
.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;}
.lp-path:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 26px 56px rgba(11,12,14,.1);}
.lp-path:hover::after{opacity:1;}
.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);}
.lp-path-ic svg{width:24px;height:24px;}
.lp-path h3{margin-top:20px;font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
.lp-path p{margin-top:10px;font-size:14.5px;font-weight:300;line-height:1.58;color:var(--muted);}
.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);}
.lp-path:hover .lp-path-svcs,.lp-path:focus-within .lp-path-svcs{margin-top:18px;max-height:220px;opacity:1;}
.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;}
.lp-sec.alt .lp-path-svcs span{background:var(--bg-2);}
.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;}
.lp-path-go svg{width:17px;height:17px;color:var(--rose-500);transition:transform .3s;}
.lp-path:hover .lp-path-go{color:var(--rose-600);}
.lp-path:hover .lp-path-go svg{transform:translate(3px,-3px);}

/* AI card - quick AI-gradient flash on hover */
.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;}
.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 */
.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;}
.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;}}
.lp-path-ai{position:relative;}
.lp-path-ai:hover{border-color:var(--violet-2);box-shadow:0 26px 56px rgba(122,0,255,.16);}
.lp-path-ai > *{position:relative;z-index:2;}
.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;}
.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);}
.lp-path-ai:hover .lp-path-go{color:var(--violet);}
.lp-path-ai:hover .lp-path-go svg{color:var(--violet-2);}

/* ============================================================
   6 · WHY WDI - premium bento (light)
   ============================================================ */
.lp-why{background:#08090B;color:#fff;position:relative;isolation:isolate;overflow:hidden;}
.lp-why .wrap{position:relative;z-index:2;}
.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%);}
.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;}
.lp-why .lp-h{color:#fff;}
.lp-why .lp-aeo{color:rgba(255,255,255,.62);}
.lp-wy-head{margin-bottom:clamp(34px,3.6vw,48px);}
/* stats strip */
.lp-wy-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;margin:0 auto clamp(30px,3.4vw,46px);}
.lp-wy-stat{text-align:center;position:relative;}
.lp-wy-stat + .lp-wy-stat::before{content:"";position:absolute;left:-7px;top:14%;height:56%;width:1px;background:rgba(255,255,255,.12);}
.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;}
.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);}
.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 */
.lp-wy-rail-wrap{position:relative;}
.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;}
.lp-wy-rail::-webkit-scrollbar{display:none;}
.lp-wy-rail:active{cursor:grabbing;}
.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;}
.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);}
.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);}
.lp-wy-card:hover::after{width:100%;}
.lp-wy-card-top{display:flex;align-items:center;justify-content:space-between;}
.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;}
.lp-wy-card-ic svg{width:26px;height:26px;}
.lp-wy-card:hover .lp-wy-card-ic{transform:scale(1.06) rotate(-4deg);background:#fff;color:var(--ink);}
.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;}
.lp-wy-card:hover .lp-wy-card-n{color:var(--rose-400);}
.lp-wy-card-body h3{margin-top:22px;font-size:19px;font-weight:600;letter-spacing:-0.02em;color:#fff;}
.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);}
.lp-wy-card-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;}
.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 */
.lp-wy-rail-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:6px;}
.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;}
.lp-wy-arrow svg{width:18px;height:18px;}
.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);}
.lp-wy-arrow:disabled{opacity:.28;cursor:default;transform:none;box-shadow:none;border-color:rgba(255,255,255,.1);}
/* foot CTA */
.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);}
.lp-wy-foot p{font-size:clamp(19px,2vw,26px);font-weight:500;letter-spacing:-0.025em;color:#fff;max-width:20ch;}
.lp-wy-foot .lp-btn{flex:none;}
.lp-wy-foot .lp-btn-primary{background:var(--rose-500);color:#fff;border:1.5px solid var(--rose-500);}
.lp-wy-foot .lp-btn-primary:hover{background:#fff;color:var(--rose-600);border-color:#fff;}

/* in-page portfolio closing line (v2) */
.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;}
.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) */
.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);}
.lp-eng-rec:hover{box-shadow:0 0 0 1px var(--rose-400),0 30px 60px rgba(228,18,82,.2) !important;}
.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);}
.lp-eng-badge svg{width:12px;height:12px;}

/* ============================================================
   7 · PROCESS - process columns w/ hover imagery (YLLW-style)
   ============================================================ */
.lp-process{position:relative;isolation:isolate;overflow:hidden;}
.lp-process .wrap{position:relative;z-index:1;}
.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%);}
.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;}
.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;}
.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;}
.lp-sec:not(.alt) .lp-pcol{background:var(--bg-2);}
.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);}
.lp-pcol:hover::after,.lp-pcol.is-active::after{transform:scaleX(1);}
.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);}
.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));}
.lp-pcol:hover .lp-pcol-img,.lp-pcol.is-active .lp-pcol-img{opacity:1;transform:scale(1);}
.lp-pcol:hover .lp-pcol-scrim,.lp-pcol.is-active .lp-pcol-scrim{opacity:1;}
.lp-pcol-body{position:relative;z-index:2;}
.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;}
.lp-pcol:hover .lp-pcol-badge,.lp-pcol.is-active .lp-pcol-badge{background:var(--rose-500);color:#fff;box-shadow:0 6px 18px rgba(228,18,82,.45);}
.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;}
.lp-pcol:hover .lp-pcol-title,.lp-pcol.is-active .lp-pcol-title{color:#fff;}
.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;}
.lp-pcol-more svg{width:15px;height:15px;}
.lp-pcol:hover .lp-pcol-more,.lp-pcol.is-active .lp-pcol-more{opacity:1;transform:translateY(0);pointer-events:auto;}
.lp-pcol-more:hover{gap:12px;}
/* tags pinned to the bottom */
.lp-pcol-tags{position:relative;z-index:2;margin-top:auto;padding-top:24px;}
.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;}
.lp-pcol:hover .lp-pcol-tags span,.lp-pcol.is-active .lp-pcol-tags span{color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.22);}
/* footer line */
.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);}
.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;}
.lp-proc-flink svg{width:16px;height:16px;color:var(--rose-500);}
.lp-proc-flink:hover{color:var(--rose-600);gap:12px;}

/* ============================================================
   8 · OUTCOMES
   ============================================================ */
.lp-out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.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;}
.lp-out:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 20px 46px rgba(11,12,14,.08);}
.lp-out-check{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--rose-soft);color:var(--rose-600);}
.lp-out-check svg{width:20px;height:20px;}
.lp-out h3{margin-top:18px;font-size:18px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
.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)
   ============================================================ */
.lp-proof .pp-band-in{max-width:1060px;}
.lp-proof-cats{margin:40px auto 8px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:880px;}
.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;}
.lp-proof-cats span:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);transform:translateY(-2px);}
.lp-proof .ct-band-cta{margin-top:38px;}

/* ============================================================
   TEAM (v2) - Titan-style cards, + reveals contact
   ============================================================ */
.lp-sec.lp-team{background:#F4F5F7;}
.lp-team-head{max-width:840px;margin:0 0 clamp(38px,4.5vw,58px);text-align:left;}.lp-team-head .lp-eyebrow{justify-content:flex-start;}
.lp-team-head .lp-h{text-align:left;margin-top:16px;}
.lp-team-head .lp-aeo,.lp-team-head .lp-supp{text-align:left;margin-left:0;margin-right:0;}
.lp-team-head .lp-h b{font-weight:600;}
.lp-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);}
.lp-tm{display:flex;flex-direction:column;}
.lp-tm-top{margin-bottom:22px;}
.lp-tm-name{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-0.03em;line-height:1.02;color:var(--ink);}
.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;}
.lp-tm-photo{position:relative;aspect-ratio:1/1.08;border-radius:20px;overflow:hidden;background:var(--page);isolation:isolate;}
.lp-tm-photo image-slot{display:block;width:100%;height:100%;}
.lp-tm-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* + button */
.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;}
.lp-tm-plus .ic{position:relative;width:15px;height:15px;}
.lp-tm-plus .ic::before,.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;}
.lp-tm-plus .ic::before{width:15px;height:1.8px;transform:translate(-50%,-50%);}
.lp-tm-plus .ic::after{width:1.8px;height:15px;transform:translate(-50%,-50%);}
.lp-tm-plus:hover{transform:scale(1.06);}
.lp-tm.open .lp-tm-plus{background:var(--rose-500);}
.lp-tm.open .lp-tm-plus .ic::before,.lp-tm.open .lp-tm-plus .ic::after{background:#fff;}
.lp-tm.open .lp-tm-plus .ic::before{transform:translate(-50%,-50%) rotate(45deg);}
.lp-tm.open .lp-tm-plus .ic::after{transform:translate(-50%,-50%) rotate(45deg);opacity:0;}
/* contact overlay */
.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;}
.lp-tm.open .lp-tm-contact{opacity:1;pointer-events:auto;}
.lp-tm-ct-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-300);margin-bottom:12px;}
.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;}
.lp-tm-contact a .k{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.lp-tm-contact a:hover{color:var(--rose-300);}
@media (prefers-reduced-motion:reduce){.lp-tm-plus,.lp-tm-plus .ic::before,.lp-tm-plus .ic::after,.lp-tm-contact{transition:none;}}

/* capability cards */
.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);}
.lp-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.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;}
.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);}
.lp-cap:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 24px 52px rgba(11,12,14,.09);}
.lp-cap:hover::before{width:100%;}
.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;}
.lp-cap-ic svg{width:26px;height:26px;}
.lp-cap:hover .lp-cap-ic{transform:scale(1.06) rotate(-4deg);background:var(--ink);color:#fff;}
.lp-cap h3{margin-top:20px;font-size:18.5px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;color:var(--ink);}
.lp-cap p{margin-top:11px;font-size:14px;font-weight:300;line-height:1.6;color:var(--muted);}
.lp-cap-areas{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;}
.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;}
.lp-cap:hover .lp-cap-areas span{background:#fff;border-color:var(--line-2);}

/* philosophy */
.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);}
.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);}
.lp-phil-l p{margin-top:18px;font-size:15.5px;font-weight:300;line-height:1.62;color:var(--muted);max-width:52ch;}
.lp-phil-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;padding-top:6px;}
.lp-phil-list li{position:relative;padding-left:26px;font-size:15px;font-weight:500;letter-spacing:-0.01em;color:var(--ink);}
.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));}
.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 */
.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;}
.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%);}
.lp-team-cta h3,.lp-team-cta p,.lp-team-cta-btns{position:relative;z-index:1;}
.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;}
.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);}
.lp-team-cta-btns{margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
.lp-team-cta-btns .lp-btn-primary{border:1.5px solid rgba(255,255,255,.85);}
.lp-team-cta-btns .lp-btn-primary:hover{border-color:var(--rose-500);}
.lp-team-cta-btns .lp-btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);}
.lp-team-cta-btns .lp-btn-ghost:hover{border-color:var(--rose-400);color:var(--rose-300);}

/* ============================================================
   10 · AI OPPORTUNITY
   ============================================================ */
.lp-ai{background:var(--bg);}
.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;}
.lp-ai .wrap{position:relative;z-index:2;}
.lp-eyebrow-ai{color:var(--violet);}
.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 */
.lp-ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.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);}
.lp-ai-card::before,.lp-ai-card::after{content:"";position:absolute;inset:0;pointer-events:none;}
.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;}
.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;}
.lp-ai-card:hover{background:#F1EFE8;transform:translateY(-3px);}
.lp-ai-card h3{font-size:19px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
.lp-ai-card p{margin-top:12px;font-size:14px;font-weight:300;line-height:1.55;color:var(--muted);}
.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;}
.lp-ai-more svg{width:14px;height:14px;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s;}
.lp-ai-card:hover .lp-ai-more{color:var(--rose-600);border-color:var(--rose-600);gap:9px;}
.lp-ai-card:hover .lp-ai-more svg{opacity:1;transform:none;}

/* ============================================================
   11 · ENGAGEMENT OPTIONS - plan-card layout (3 + 2)
   ============================================================ */
.lp-engage-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.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;}
.lp-eng:nth-child(4),.lp-eng:nth-child(5){grid-column:span 3;}
.lp-eng:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 26px 56px rgba(11,12,14,.1);}
.lp-eng-t{font-size:clamp(20px,1.7vw,25px);font-weight:600;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);}
.lp-eng-meta{margin-top:10px;font-size:14.5px;font-weight:500;letter-spacing:-0.01em;color:var(--rose-600);}
.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;}
.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);}
.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;}
.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);}
.lp-eng-ar svg{width:17px;height:17px;}
.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)
   ============================================================ */
.lp-faq{background:var(--bg);}

/* ============================================================
   14 · FINAL CTA (dark)
   ============================================================ */
.lp-final{position:relative;padding:clamp(90px,11vw,150px) 0;background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;overflow:hidden;text-align:center;}
.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%);}}
.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%);}
.lp-final-in{position:relative;z-index:2;max-width:900px;margin:0 auto;}
.lp-eyebrow-dark{color:var(--rose-300);}
.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;}
.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;}
.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);}
.lp-final-cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.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;}
.lp-final-sub:hover{color:var(--rose-300);border-color:var(--rose-400);}
.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
   ============================================================ */
.lp-form-sec .lfv-split{height:auto;min-height:0;}
.lp-form-sec .lfv-scroll{overflow:visible;}
.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 */
.lp-form-sec .lfv-side{min-height:100%;}

/* ============================================================
   BAND CTA - restore pill + circular arrow (contact css not loaded here)
   ============================================================ */
.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;}
.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;}
.ct-band-cta .ar svg{width:15px;height:15px;}
.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);}
.ct-band-cta:hover .ar{transform:translateX(2px);background:rgba(11,12,14,.1);}

/* ============================================================
   LEAD-FORM TICKER  (redesigned signal bar atop the form)
   ============================================================ */
.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 */
.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 */
.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;}
.lp-ticker-badge::after{content:"";position:absolute;top:0;bottom:0;right:-44px;width:44px;
  background:linear-gradient(90deg,#0b0c0e,transparent);pointer-events:none;}
.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 */
.lp-ticker-view{position:relative;flex:1;overflow:hidden;}
.lp-ticker-view::before,.lp-ticker-view::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
.lp-ticker-view::before{left:0;background:linear-gradient(90deg,#0b0c0e,transparent);}
.lp-ticker-view::after{right:0;background:linear-gradient(270deg,#0b0c0e,transparent);}
.lp-ticker-inner{display:flex;width:max-content;height:100%;animation:lpTkScroll 42s linear infinite;}
.lp-ticker:hover .lp-ticker-inner{animation-play-state:paused;}
.lp-ticker-track{display:flex;align-items:center;flex:none;}
.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;}
.lp-ticker-track .lp-tk:nth-child(odd){color:rgba(255,255,255,.82);}
.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){.lp-ticker-inner{animation:none;}.lp-ticker::before{animation:none;}}
@media (max-width:680px){.lp-ticker-badge{display:none;}}

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

/* ============================================================
   UNIFIED SECTION HEADERS - consistent size + weight sitewide
   ============================================================ */
.lp-h,.lp-eco-h,.lp-diag-h,.pp-band h2,.pfd-h,.tsm-head .ts-h,
.lp-final-h,.fq-h,.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-wf-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;
}



.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

.rs-vtag{max-width:var(--maxw);margin:0 auto;padding:28px 40px 0;font-size:13.5px;color:var(--muted);}
.rs-vtag b{color:var(--ink);font-weight:500;}
.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;}

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

/* shared header */
.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);}
.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);}
.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;}
.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;}
.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 */
.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);}
.rs-type::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--rose-600),var(--rose-400));}
.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;}
.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;}
.rs-readmore svg{width:16px;height:16px;color:var(--rose-600);transition:transform .25s;}
.rs-readmore:hover{color:var(--rose-600);gap:12px;}
.rs-readmore:hover svg{transform:translateX(3px);}

/* media slot frame */
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 */
.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 */
.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);}
.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));}
.rs-cta-h{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
.rs-cta-p{margin-top:10px;font-size:15px;line-height:1.55;font-weight:300;color:var(--ink-2);max-width:64ch;}
.rs-cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex:none;}
.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;}
.rs-btn svg{width:16px;height:16px;transition:transform .25s;}
.rs-btn:hover{background:var(--rose-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,18,82,.24);}
.rs-btn:hover svg{transform:translateX(3px);}
.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;}
.rs-btn-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}

/* ============================================================
   VARIANT A — BOLD EDITORIAL (3 image cards + category tabs)
   ============================================================ */
.rsa-head{max-width:900px;}
.rsa-tabs{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2;}
.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;}
.rsa-tab:hover{color:var(--ink);border-color:var(--line-2);}
.rsa-tab.active{color:#fff;background:var(--ink);border-color:var(--ink);}
.rsa-grid{margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.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);}
.rs-sec.in .rsa-card{opacity:1;transform:none;transition-delay:var(--d);}
.rsa-card.hide{display:none;}
.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);}
.rsa-media image-slot{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.rsa-card:hover .rsa-media .rs-fill{transform:scale(1.05);}
.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);}
.rsa-meta{margin-top:20px;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;color:var(--muted);}
.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;}
.rsa-card:hover .rsa-title{color:var(--rose-700);}
.rsa-desc{margin-top:12px;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-2);}
.rsa-foot{margin-top:auto;padding-top:18px;}
.rsa-more{margin-top:48px;display:flex;justify-content:center;}

/* ============================================================
   VARIANT B — MINIMAL LEDGER (no image, 3-column rows)
   ============================================================ */
.rsb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.rsb-filters{display:flex;gap:8px;flex-wrap:wrap;}
.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;}
.rsb-filter:hover{color:var(--ink);}
.rsb-filter.active{color:var(--ink);background:#fff;border-color:var(--line);box-shadow:0 1px 3px rgba(11,12,14,.05);}
.rsb-list{margin-top:50px;border-top:1px solid var(--line);}
.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);}
.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);}
.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);}
.rsb-row:hover{padding-left:22px;}
.rsb-row:hover::before{transform:scaleY(1);}
.rsb-type{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.01em;padding-top:3px;}
.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;}
.rsb-row:hover .rsb-title{color:var(--rose-700);}
.rsb-tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px;}
.rsb-desc{font-size:14.5px;font-weight:300;line-height:1.55;color:var(--ink-2);}
.rsb-desc .rs-readmore{margin-top:14px;}

/* ============================================================
   VARIANT C — TWO-UP FEATURE (big images, tags+title+sub below)
   ============================================================ */
.rsc-grid{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;}
.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);}
.rs-sec.in .rsc-card{opacity:1;transform:none;transition-delay:var(--d);}
.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);}
.rsc-media image-slot{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.rsc-card:hover .rsc-media .rs-fill{transform:scale(1.04);}
.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;}
.rsc-tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.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;}
.rsc-card:hover .rsc-title{color:var(--rose-700);}
.rsc-sub{margin-top:13px;font-size:15px;font-weight:300;line-height:1.55;color:var(--ink-2);max-width:54ch;}
.rsc-foot{margin-top:18px;}

/* ============================================================
   VARIANT D — CREATIVE INTERACTIVE INDEX (dark, hover-preview)
   ============================================================ */
.rsd-sec{background:#0A0B0E;color:#fff;border-top:1px solid var(--line);}
.rsd-sec .rs-eyebrow{color:var(--rose-300);}
.rsd-sec .rs-h{color:#fff;}
.rsd-sec .rs-aeo{color:rgba(255,255,255,.72);}
.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);}}
.rsd-wrap{margin-top:60px;position:relative;z-index:2;display:grid;grid-template-columns:1.15fr 0.85fr;gap:50px;align-items:start;}
.rsd-list{display:flex;flex-direction:column;}
.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);}
.rsd-row:last-child{border-bottom:1px solid rgba(255,255,255,.10);}
.rsd-row:hover{padding-left:18px;}
.rsd-num{font-size:13px;font-weight:600;color:rgba(255,255,255,.4);font-feature-settings:"tnum" 1;transition:color .3s;}
.rsd-row.active .rsd-num{color:var(--rose-300);}
.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;}
.rsd-row:hover .rsd-rtitle,.rsd-row.active .rsd-rtitle{color:#fff;}
.rsd-rtype{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);}
.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;}
.rsd-arrow svg{width:17px;height:17px;}
.rsd-row:hover .rsd-arrow,.rsd-row.active .rsd-arrow{opacity:1;transform:none;}
.rsd-row:hover .rsd-arrow{background:var(--rose-600);border-color:var(--rose-600);}
/* preview pane */
.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;}
.rsd-pv-media{position:relative;width:100%;aspect-ratio:16/10;background:#0c0d11;overflow:hidden;}
.rsd-pv-slot{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
.rsd-pv-slot.active{opacity:1;}
.rsd-pv-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1;}
.rsd-pv-type{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--rose-300);}
.rsd-pv-title{margin-top:12px;font-size:22px;font-weight:500;letter-spacing:-0.02em;line-height:1.18;color:#fff;}
.rsd-pv-desc{margin-top:12px;font-size:14px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.7);}
.rsd-pv-fx{transform:translateY(10px);filter:blur(6px);}
.rsd-pv-fx.show{transform:none;filter:blur(0);transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .45s ease;}
.rsd-pv-foot{margin-top:auto;padding-top:22px;}
.rsd-pv-foot .rs-readmore{color:#fff;}
.rsd-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px;}
.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)
   ============================================================ */
.rse-grid{margin-top:56px;display:grid;grid-template-columns:1.5fr 1fr;gap:42px;align-items:start;}
.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);}
.rs-sec.in .rse-feat{opacity:1;transform:none;}
.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);}
.rse-feat-media .rs-fill{transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.rse-feat:hover .rse-feat-media .rs-fill{transform:scale(1.04);}
.rse-feat .rs-type{margin-top:26px;}
.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;}
.rse-feat:hover .rse-feat-title{color:var(--rose-700);}
.rse-feat-desc{margin-top:18px;font-size:16px;font-weight:300;line-height:1.6;color:var(--ink-2);max-width:60ch;}
.rse-feat-foot{margin-top:20px;}

.rse-side{display:flex;flex-direction:column;gap:30px;}
.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);}
.rs-sec.in .rse-item{opacity:1;transform:none;transition-delay:var(--d);}
.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);}
.rse-item-media .rs-fill{transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.rse-item:hover .rse-item-media .rs-fill{transform:scale(1.05);}
.rse-item .rs-type{margin-top:16px;}
.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;}
.rse-item:hover .rse-item-title{color:var(--rose-700);}
.rse-item-read{margin-top:10px;font-size:13px;font-weight:400;color:var(--muted);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .rsa-grid{grid-template-columns:1fr;gap:30px;}
  .rsa-card.hide{display:flex;}
  .rsb-row{grid-template-columns:1fr;gap:12px;}
  .rsb-type{padding-top:0;}
  .rsc-grid{grid-template-columns:1fr;}
  .rsd-wrap{grid-template-columns:1fr;gap:30px;}
  .rsd-preview{display:none;}
  .rse-grid{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:760px){
  .wrap{padding:0 22px;}
  .rs-sec{padding:70px 0 80px;}
  .rs-vtag{padding:22px 22px 0;}
  .rs-cta{padding:26px;gap:20px;}
  .rs-cta-actions{width:100%;}
  .rs-cta .rs-btn,.rs-btn-ghost{flex:1;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  .rsa-card,.rsb-row,.rsc-card{opacity:1!important;transform:none!important;}
  .rse-feat,.rse-item{opacity:1!important;transform:none!important;}
  .rsd-aura{animation:none;}
  .rsa-media image-slot,.rsc-media image-slot,.rsd-pv-slot{transition:none;}
  .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 ---- */
#design-thinking-process .prc-cells{grid-template-columns:repeat(8,1fr);column-gap:18px;}
#design-thinking-process .prc-cell,#design-thinking-process .prc-flip{min-height:280px;}
#design-thinking-process .prc-face{padding:22px 18px;}
#design-thinking-process .prc-title-s{font-size:15.5px;line-height:1.2;}
#design-thinking-process .prc-desc-s,#design-thinking-process .prc-back-text{font-size:12.5px;line-height:1.45;}
#design-thinking-process .prc-back-aeo{font-size:11.5px;}
@media(max-width:1400px){#design-thinking-process .prc-cells{grid-template-columns:repeat(4,1fr);}}
@media(max-width:900px){#design-thinking-process .prc-cells{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){#design-thinking-process .prc-cells{grid-template-columns:1fr;}}

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

/* hero progression: Business problem → User evidence → Product direction → Validated experience */
.t02-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:clamp(30px,3.6vw,44px);}
.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);}
.t02-flow i{width:26px;height:1.5px;flex:none;background:linear-gradient(90deg,var(--rose-500),var(--violet-2));position:relative;}
.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){.t02-flow i{display:none;}}

/* governance CTA — light, so it does not sit dark-on-dark before the methods section */
.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);}
.t02-mini-light .lp-h{color:var(--ink);}
.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%);}
.t02-mini-light .wrap{position:relative;z-index:1;}
.t02-mini-light p{max-width:58ch;margin:14px auto 0;font-size:16px;font-weight:300;line-height:1.55;color:var(--muted);}
.t02-mini-light .lp-inline-cta{margin-top:28px;}

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

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

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

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

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

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

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

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

/* local gradient artwork stands in for imagery (no external images used) */
.t02-art{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;}
.t02-art svg{position:absolute;inset:0;width:100%;height:100%;}
.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);}
#design-thinking-services .sv1-visual .t02-art{aspect-ratio:4/5;height:100%;border-radius:20px;}

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

/* keep the services visual bounded: photo fills the plate, grid cannot stretch it */
#design-thinking-services .sv1-visual{position:relative;align-self:start;max-height:560px;min-height:420px;}
#design-thinking-services .sv1-visual .t02-photo{position:absolute;inset:0;}
#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 */
.tsm-sec .av,.tsm-sec .tsm-av{background:linear-gradient(140deg,var(--rose-400),var(--violet));}

/* process · single card flipping through the eight stages */
.t02-proc .sa-head{max-width:900px;}
.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;}
.t02-proc-rail{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);}
.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;}
.t02-proc-tab .n{font-size:11.5px;font-weight:700;font-feature-settings:"tnum" 1;color:var(--faint);transition:color .3s;}
.t02-proc-tab .k{font-size:14px;font-weight:600;letter-spacing:-0.01em;}
.t02-proc-tab:hover{color:var(--ink);}
.t02-proc-tab.active{color:var(--ink);border-left-color:var(--rose-500);background:linear-gradient(90deg,rgba(249,47,100,.06),transparent);}
.t02-proc-tab.active .n{color:var(--rose-600);}
.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;}
.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;}
.t02-proc-panel.active{opacity:1;transform:none;pointer-events:auto;}
.t02-proc-num{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--rose-600);font-feature-settings:"tnum" 1;}
.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);}
.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;}
.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;}
.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;}
.t02-proc-cols p{font-size:13.5px;font-weight:300;line-height:1.55;color:var(--muted);}
.t02-proc-svcs{margin-top:20px;display:flex;flex-wrap:wrap;gap:7px;}
.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){.t02-proc-cols{grid-template-columns:1fr;}}
@media(max-width:900px){
  .t02-proc-card{grid-template-columns:1fr;}
  .t02-proc-rail{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);}
  .t02-proc-tab{border-left:0;border-bottom:2px solid transparent;white-space:nowrap;}
  .t02-proc-tab.active{border-bottom-color:var(--rose-500);background:none;}
  .t02-proc-stage{min-height:0;}
  .t02-proc-panel{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;display:none;}
  .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. */
#work /* WDI — portfolio v2 styles with page-level globals (*,#work html,#work body,#work .wrap,#work :root) removed
   so the module can be dropped into any page without hijacking its layout. */
/* ============================================================
   WDI — Portfolio Page (View Our Work)
   header · technology-company band (moving faded text) · projects
   ============================================================ */
#wdi-wf-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;
}
#work /* ============================================================
   1 · HEADER
   ============================================================ */
.pp-hero{position:relative;padding:120px 0 90px;text-align:center;overflow:hidden;background:var(--bg);}
#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);}
#work .pp-hero .eyebrow::before,#work .pp-hero .eyebrow::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--rose-400));}
#work .pp-hero .eyebrow::after{background:linear-gradient(90deg,var(--rose-400),transparent);}
#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);}
#work .pp-hero h1 .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#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);}
#work .pp-hero .meta{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;}
#work .pp-hero .meta .stat b{font-size:30px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
#work .pp-hero .meta .stat span{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--muted);}
#work .pp-hero .meta .div{width:1px;height:34px;background:var(--line-2);}
#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;}
#work .pp-scrollcue .mouse{width:22px;height:34px;border:1.5px solid var(--line-2);border-radius:12px;position:relative;}
#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);}}
#work /* ============================================================
   2 · TECHNOLOGY-COMPANY BAND  (moving faded backdrop text)
   ============================================================ */
.pp-band{position:relative;padding:130px 0;overflow:hidden;background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;}
#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;}
#work .pp-band-track.r1{animation:ppMarqueeL 34s linear infinite;top:34%;}
#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%);}}
#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%);}}
#work .pp-band-in{position:relative;z-index:2;text-align:center;max-width:1000px;margin:0 auto;}
#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);}
#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);}}
#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;}
#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;}
#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);}
#work /* ============================================================
   3 · OUR PROJECTS  (SpaceX cinematic full-bleed)
   ============================================================ */
.pp-projects{position:relative;padding:96px 0 0;background:var(--bg);}
#work .pp-projects-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px;}
#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);}
#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);}
#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);}
#work .pp-projects-head p{max-width:42ch;font-size:14.5px;font-weight:300;line-height:1.55;color:var(--muted);}
#work /* industry capsules */
.pp-caps{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
#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;}
#work .pp-cap:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-2px);}
#work .pp-cap.active{color:#fff;background:var(--ink);border-color:var(--ink);}
#work .pp-cap .n{font-size:11px;opacity:.55;margin-left:6px;font-feature-settings:"tnum" 1;}
#work /* full-bleed cinematic panels */
.pp-stack{}
#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;}
#work .pp-card[hidden]{display:none;}
#work /* real media (image / video) fills the frame with a slow cinematic zoom */
.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);}
#work .pp-media img,#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);}
#work .pp-card.in .pp-media img,#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%);}}
#work /* hue + WDI-pink cinematic scrim */
.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%);}
#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%);}
#work .pp-card.hot .pp-glow{opacity:1;}
#work /* corner index + vertical industry */
.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;}
#work .pp-index b{color:#fff;}
#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);}
#work .pp-x .cross{color:var(--hue,#39E07B);font-weight:700;}
#work .pp-x b{color:#fff;}
#work .pp-vind{position:absolute;right:40px;top:0;bottom:0;z-index:3;display:flex;align-items:center;pointer-events:none;}
#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);}
#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);}
#work /* content anchored bottom-left (SpaceX style) */
.pp-content{position:absolute;left:0;right:0;bottom:0;z-index:3;}
#work .pp-content-in{max-width:var(--maxw);margin:0 auto;padding:120px 40px 70px;}
#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);}
#work .pp-logo .lg{font-weight:800;font-size:18px;letter-spacing:-0.02em;color:#fff;}
#work .pp-logo img{height:52px;width:auto;max-width:240px;object-fit:contain;display:block;}
#work .pp-logo .lg em{font-style:normal;color:color-mix(in srgb,var(--hue,#39E07B) 80%,#0B0C0E);}
#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;}
#work .pp-eyebrow .n{color:var(--hue,#39E07B);}
#work .pp-eyebrow .bar{width:30px;height:1px;background:rgba(255,255,255,.4);}
#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;}
#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;}
#work .pp-card.in .pp-name-tx{animation:ppSheen 1.5s cubic-bezier(.4,0,.2,1) .55s 1 forwards;}
#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;}}
#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;}
#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;}
#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;}
#work .pp-tags{display:flex;flex-wrap:wrap;gap:9px;}
#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);}
#work .pp-tag.lead{background:var(--hue,#39E07B);color:#0B0C0E;border-color:var(--hue,#39E07B);}
#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;}
#work .pp-explore svg{width:16px;height:16px;transition:transform .3s;}
#work .pp-explore:hover{background:var(--hue,#39E07B);border-color:var(--hue,#39E07B);color:#0B0C0E;transform:translateY(-2px);gap:16px;}
#work .pp-explore:hover svg{transform:translateX(3px);}
#work .pp-card.in .pp-logo,#work .pp-card.in .pp-eyebrow,#work .pp-card.in .pp-name,#work .pp-card.in .pp-tagline,#work .pp-card.in .pp-desc,#work .pp-card.in .pp-row{opacity:1;transform:none;}
#work /* refined header: eyebrow */
.pp-eyebrow{gap:13px;font-size:11.5px;letter-spacing:.28em;color:rgba(255,255,255,.82);}
#work .pp-eyebrow .n{color:var(--hue,#39E07B);font-weight:700;}
#work .pp-eyebrow .bar{width:38px;background:linear-gradient(90deg,var(--hue,#39E07B),transparent);height:1.5px;}
#work /* ---- key impact zone (TOP-RIGHT,#work corporate) ---- */
.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;}
#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;}
#work .pp-keystat-label::before{content:"";width:16px;height:1px;background:color-mix(in srgb,var(--hue,#39E07B) 75%,#fff);opacity:.7;}
#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;}
#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;}
#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;}
#work .pp-mcap:not(:first-child){margin-left:11px;}
#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;}
#work .pp-card.in .pp-keystat-label,#work .pp-card.in .pp-keystat-h,#work .pp-card.in .pp-mcaps{opacity:1;transform:none;}
#work /* ---- review badges (BOTTOM-RIGHT,#work real award badge + short quote) ---- */
.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;}
#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);}
#work .pp-rev:nth-child(2){transition-delay:.1s;}
#work .pp-card.in .pp-rev{opacity:1;transform:none;}
#work .pp-rev-badge{height:54px;width:auto;flex:none;display:block;border-radius:8px;background:#fff;}
#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);}
#work .pp-rev-google .pp-rev-mk svg{width:27px;height:27px;display:block;}
#work .pp-rev-in{display:flex;flex-direction:column;gap:6px;line-height:1;}
#work .pp-rev-q{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-0.015em;line-height:1.18;}
#work .pp-rev-meta{display:inline-flex;align-items:center;gap:9px;}
#work .pp-rev .st{display:inline-flex;gap:1.5px;color:#FFC53D;}
#work .pp-rev .st svg{width:12px;height:12px;}
#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);}
#work /* ============================================================
   CTA card (WDI homepage style — light,#work animated)
   ============================================================ */
.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;}
#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);}}
#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%);}
#work .pp-cta-in{position:relative;z-index:2;max-width:760px;padding:0 40px;}
#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);}
#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);}}
#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;}
#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;}
#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;}
#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;}
#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;}
#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;}
#work .pp-cta-btn .ar svg{width:16px;height:16px;}
#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);}
#work .pp-cta-btn:hover .ar{transform:translateX(2px);}
#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;}
#work .pp-cta-ghost:hover{border-color:var(--rose-300);transform:translateY(-2px);}
#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;}
#work .pp-cta-stats .s b{font-size:28px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
#work .pp-cta-stats .s span{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--muted);}
#work .pp-cta-stats .d{width:1px;height:32px;background:var(--line-2);}
#work .pp-cta.in .pp-cta-eyebrow,#work .pp-cta.in .pp-cta-h,#work .pp-cta.in .pp-cta-p,#work .pp-cta.in .pp-cta-actions,#work .pp-cta.in .pp-cta-stats{opacity:1;transform:none;}
@media(max-width:760px){#work .pp-cta{min-height:auto;padding:90px 0;}#work .pp-cta-stats{gap:18px;}#work .pp-cta-stats .d{display:none;}}
@media(prefers-reduced-motion:reduce){#work .pp-cta-aura{animation:none;}#work .pp-cta .pp-cta-in *{opacity:1!important;transform:none!important;}}
#work /* foreground collateral (device mockup) — vertically centred on the right */
.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;}
#work .pp-card.in .pp-device{opacity:1;transform:translateY(-50%);}
#work /* tablet / small-laptop band: keep corner layout but shrink columns so they never meet */
@media(min-width:761px) and (max-width:1080px){
  .pp-row{max-width:46%;}
  .pp-rev{max-width:240px;padding:10px 15px 10px 10px;gap:11px;}
  .pp-rev-badge{height:46px;}
  .pp-rev-google .pp-rev-mk{width:42px;height:42px;}
  .pp-rev-q{font-size:13.5px;}
  .pp-keystat-h{font-size:clamp(16px,1.9vw,20px);max-width:16ch;}
}
@media(max-width:760px){#work .pp-device{position:relative;right:auto;top:auto;height:auto;max-width:74%;margin:24px auto -10px;display:block;transform:none;}#work .pp-card.in .pp-device{transform:none;}}
@media(max-width:760px){#work .pp-hero{padding:80px 0 60px;}#work .pp-band{padding:90px 0;}#work .pp-card{height:auto;min-height:0;max-height:none;}#work .pp-media{position:relative;height:46vh;}#work .pp-content{position:relative;background:#08090c;}#work .pp-content-in{padding:30px 22px 44px;}#work .pp-vind,#work .pp-index{display:none;}#work .pp-name{opacity:1;transform:none;}#work .pp-keystat{top:62px;left:0;transform:none;padding:0 22px;align-items:flex-end;text-align:right;}#work .pp-keystat-h{font-size:19px;max-width:16ch;}#work .pp-mcaps{display:none;}#work .pp-reviews{position:static;transform:none;left:auto;width:auto;max-width:none;padding:0 22px 30px;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:10px;background:#08090c;margin-top:-6px;}#work .pp-rev{max-width:none;width:100%;}}
@media(prefers-reduced-motion:reduce){#work .pp-band-track,#work .pp-band::before{animation:none;}#work .pp-media img,#work .pp-media video{animation:none!important;transform:none;}#work .pp-card .pp-content *{opacity:1!important;transform:none!important;}}
#work /* ============================================================
   awards rolling strip
   ============================================================ */
.pp-awards{position:relative;background:var(--bg);border-top:1px solid var(--line);padding:96px 0 100px;overflow:hidden;}
#work .pp-awards-head{text-align:center;max-width:720px;margin:0 auto 52px;}
#work .pp-awards-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-600);}
#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;}
#work .pp-awards-sub{margin-top:18px;font-size:clamp(15px,1.3vw,17px);font-weight:300;line-height:1.55;color:var(--muted);}
#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);}
#work .pp-awards-rail{display:flex;align-items:center;gap:64px;width:max-content;animation:ppAwardRoll 42s linear infinite;}
#work .pp-awards-strip:hover .pp-awards-rail{animation-play-state:paused;}
@keyframes ppAwardRoll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
#work .pp-award{flex:none;display:flex;align-items:center;gap:13px;color:#AEB3BB;transition:color .35s ease,filter .35s ease,transform .35s ease;}
#work .pp-award .medal{width:26px;height:26px;flex:none;color:inherit;}
#work .pp-award .medal svg{width:100%;height:100%;}
#work .pp-award .by{font-size:24px;font-weight:600;letter-spacing:-0.02em;white-space:nowrap;}
#work .pp-award .rt{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:inherit;opacity:.8;}
#work .pp-award .rt svg{width:13px;height:13px;}
#work .pp-award:hover{color:var(--ink);filter:drop-shadow(0 0 16px rgba(249,47,100,.25));transform:translateY(-1px);}
#work .pp-award:hover .rt{color:var(--rose-600);opacity:1;}
#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){#work .pp-awards{padding:70px 0 78px;}#work .pp-awards-rail{gap:44px;}}
@media(prefers-reduced-motion:reduce){#work .pp-awards-rail{animation:none;}}
#work /* ============================================================
   small CTA (mini) + footer
   ============================================================ */
.tsb-tile .av{display:grid;place-items:center;background:linear-gradient(135deg,var(--rose-500),var(--violet));overflow:hidden;}
#work .tsb-tile .av span{font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff;}
#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);}
#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);}}
#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%);}
#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));}
#work .pp-mini-in{position:relative;z-index:2;max-width:880px;padding:0 40px;display:flex;flex-direction:column;align-items:center;}
#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);}
#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;}
#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;}
#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;}
#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);}
#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;}
#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;}
#work .pp-mini-btn .ar svg{width:18px;height:18px;}
#work .pp-mini-btn:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(228,18,82,.34);}
#work .pp-mini-btn:hover .ar{transform:translateX(3px) rotate(-8deg);}
@media(max-width:760px){#work .pp-mini{min-height:0;padding:90px 0;}#work .pp-mini-btn{width:100%;justify-content:center;}}
@media(prefers-reduced-motion:reduce){#work .pp-mini-aura{animation:none;}}
#work .pp-foot{background:#0B0C0E;color:rgba(255,255,255,.7);padding:64px 0 30px;}
#work .pp-foot-in{display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap;}
#work .pp-foot-brand img{height:30px;width:auto;}
#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);}
#work .pp-foot-cols{display:flex;gap:60px;flex-wrap:wrap;}
#work .pp-foot-cols b{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;margin-bottom:14px;}
#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;}
#work .pp-foot-cols a:hover{color:var(--rose-400);}
#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){#work .pp-mini-in{padding:26px;}#work .pp-mini .pp-cta-btn{width:100%;justify-content:center;}}
#work /* ============================================================
   4 · IN THE WORKS AT WDI
   ============================================================ */
.iw-sec{position:relative;padding:110px 0 130px;background:var(--bg-2);border-top:1px solid var(--line);}
#work .iw-head{text-align:center;max-width:720px;margin:0 auto 56px;}
#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);}
#work .iw-head .eyebrow::before,#work .iw-head .eyebrow::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--rose-400));}
#work .iw-head .eyebrow::after{background:linear-gradient(90deg,var(--rose-400),transparent);}
#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);}
#work .iw-head h2 .amp{background:linear-gradient(120deg,var(--rose-600),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
#work .iw-head p{margin-top:18px;font-size:16px;font-weight:300;line-height:1.55;color:var(--muted);}
#work .iw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
#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);}
#work .iw-sec.in .iw-item{opacity:1;transform:none;}
#work /* co-brand card */
.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);}
#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);}
#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%);}
#work .iw-item:hover .iw-card{border-color:var(--rose-300);transform:translateY(-5px);box-shadow:0 24px 50px rgba(11,12,14,.16);}
#work .iw-item:hover .iw-card::before{transform:scale(1.08);}
#work /* industry tag */
.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);}
#work /* status dot */
.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);}
#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;}}
#work /* WDI × project lockup */
.iw-lock{position:relative;z-index:1;display:flex;align-items:center;gap:18px;}
#work .iw-lock .wdi{height:30px;width:auto;}
#work .iw-lock .x{font-size:18px;font-weight:300;color:rgba(255,255,255,.45);}
#work .iw-lock .proj{font-size:24px;font-weight:700;letter-spacing:-0.02em;color:#fff;}
#work .iw-lock .proj em{font-style:normal;color:var(--hue,#39E07B);}
#work /* meta below card */
.iw-meta{margin-top:18px;padding:0 4px;}
#work .iw-name{font-size:18px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);}
#work .iw-desc{margin-top:7px;font-size:13.5px;font-weight:300;line-height:1.5;color:var(--muted);}
@media(max-width:980px){#work .iw-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#work .iw-grid{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){#work .iw-item{opacity:1!important;transform:none!important;}#work .iw-status .lvdot{animation:none;}}
#work /* ===== Testimonials (Variant B,#work copied) ===== */
.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);}
#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);}
#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;}
#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;}
#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));}
}
#work /* VARIANT B */
.tsb-sec{padding:100px 0 130px;background:var(--bg);border-top:1px solid var(--line);}
#work .tsb-head{text-align:center;max-width:680px;margin:0 auto 56px;}
#work .tsb-head .ts-h .accent{color:var(--rose-600);}
#work .tsb-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:14px;}
#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;}
#work .tsb-tile:hover{border-color:var(--rose-300);transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,12,14,.06);}
#work .tsb-tile .quote{font-size:15px;font-weight:400;line-height:1.5;color:var(--ink);}
#work .tsb-tile .author{margin-top:18px;display:flex;align-items:center;gap:11px;}
#work .tsb-tile .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#eee;flex:none;}
#work .tsb-tile .av img{width:100%;height:100%;object-fit:cover;}
#work .tsb-tile .name{font-size:13px;font-weight:500;color:var(--ink);}
#work .tsb-tile .role{margin-top:1px;font-size:11.5px;color:var(--muted);}
#work .tsb-tile.dark{background:linear-gradient(160deg,#0E0F12,#16181E);color:#fff;border-color:transparent;}
#work .tsb-tile.dark .quote,#work .tsb-tile.dark .name{color:#fff;}
#work .tsb-tile.dark .role{color:rgba(255,255,255,.6);}
#work .tsb-tile.lg{grid-column:span 4;grid-row:span 2;}
#work .tsb-tile.md{grid-column:span 3;}
#work .tsb-tile.sm{grid-column:span 2;}
#work .tsb-tile.lg .quote{font-size:21px;font-weight:500;letter-spacing:-0.015em;line-height:1.4;}
#work .tsb-tile.md .quote{font-size:16.5px;}
/* sticky card stack — each card pins while the next slides over it */
#work #ppStack{position:relative;}
#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){#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) ---- */
.t05-cmp{background:var(--bg-2);}
.t05-cmp-table{max-width:1180px;margin:0 auto;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;}
.t05-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.t05-cmp-grid{min-width:940px;display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1fr;}
.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);}
.t05-cmp-grid > div:nth-child(5n+1){border-left:none;font-weight:500;color:var(--ink);background:var(--bg-2);}
.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;}
.t05-cmp-grid > .t05-cmp-hd:first-child{background:#fff;}
.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);}
.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;}
.t05-cmp-note svg{width:20px;height:20px;flex:none;color:var(--rose-600);margin-top:2px;}
.t05-cmp-note p{margin:0;font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-2);}
.t05-cmp-cta{max-width:1180px;margin:26px auto 0;display:flex;justify-content:center;}
@media(max-width:860px){.t05-cmp-hint{display:block;}}
.t05-cmp-hint{display:none;margin:0 auto 12px;max-width:1180px;font-size:12.5px;color:var(--muted);}

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

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

/* ---- category proof strip: only verified metrics render ---- */
.t05-proof-metrics{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(24px,4vw,60px);margin-top:clamp(24px,3vw,36px);}
.t05-proof-metric{text-align:center;}
.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;}
.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);}
.t05-proof-metric[data-verified="false"]{display:none;}

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

/* ---- technology tabs: show all categories, no horizontal scroll ---- */
#tech-b .teb-tabs{display:flex;flex-wrap:wrap;justify-content:center;overflow:visible!important;gap:10px;}
#tech-b .teb-tabs::-webkit-scrollbar{display:none;}
#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 ---- */
#work{padding-left:0;padding-right:0;}
#work .pp-stack{position:relative;width:100%;max-width:none;margin:0;padding:0;}
#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;}
#work .pp-media{position:absolute;inset:0;width:100%;height:100%;}
#work .pp-media img,#work .pp-media video{width:100%;height:100%;object-fit:cover;}
@media(prefers-reduced-motion:reduce){#work .pp-card{position:relative;height:auto;min-height:60vh;}}
@media(max-width:860px){#work .pp-card{height:auto;min-height:0;}#work .pp-media{position:relative;height:46vh;}}

/* ---- technology marquee: give the left panel more room ---- */
#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;}
#tech-a .tea-left{max-width:none;}
#tech-a .te-h{font-size:clamp(28px,3vw,44px);line-height:1.08;}
#tech-a .te-sub{max-width:46ch;}
@media(max-width:960px){#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)
   ============================================================ */
body #hero ~ * .sec-h,
body #hero ~ * .uc-h,
body #hero ~ * .svv-h,
body #hero ~ * .sv4-h,
body #hero ~ * .sv5-h,
body #hero ~ * .pr-h,
body #hero ~ * .sa-h,
body #hero ~ * .chal-h,
body #hero ~ * .fq-h,
body #hero ~ * .cs-h,
body #hero ~ * .ts-h,
body #hero ~ * .lp-eco-h,
body #hero ~ * .lp-h,
body #hero ~ * .teb-h,
body #hero ~ * .tea-h,
body #hero ~ * .ivv-h,
body #hero ~ * .eng-h,
body #hero ~ * .ava-h,
body #hero ~ * .pfd-h,
body #hero ~ * .piw-h,
body #hero ~ * .lp-final-h,
body #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 */
body #hero ~ * .sec-h .accent,
body #hero ~ * .lp-h .amp,
body #hero ~ * .ts-h .accent,
body #hero ~ * .lp-final-h em,
body #hero ~ * .t02-cta-band h2 em{font-weight:400!important;font-style:normal;}
/* uniform eyebrows above every header */
body #hero ~ * .eyebrow-2,
body #hero ~ * .uc-eyebrow,
body #hero ~ * .svv-eyebrow,
body #hero ~ * .pr-eyebrow,
body #hero ~ * .sa-eyebrow,
body #hero ~ * .chal-eyebrow,
body #hero ~ * .fq-eyebrow,
body #hero ~ * .cs-eyebrow,
body #hero ~ * .ts-eyebrow,
body #hero ~ * .lp-eyebrow,
body #hero ~ * .ava-eyebrow,
body #hero ~ * .pfd-eyebrow,
body #hero ~ * .teb-eyebrow,
body #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-wf-page section.t02-cta-band h2,
#wdi-wf-page section#work h2,
#wdi-wf-page section.pp-band h2,
#wdi-wf-page section .te-h,
#wdi-wf-page section .tea-h,
#wdi-wf-page section .teb-h,
#wdi-wf-page section .rs-h,
#wdi-wf-page section .avv-h,
#wdi-wf-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-wf-page section.t02-cta-band h2 em,
#wdi-wf-page section.pp-band h2 em,
#wdi-wf-page section#work h2 em{font-weight:400!important;font-style:normal;}
#wdi-wf-page section .te-eyebrow,
#wdi-wf-page section .rs-eyebrow,
#wdi-wf-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.
   ============================================================ */
.t02-cta-band{position:relative;padding:clamp(84px,10vw,124px) 0;overflow:hidden;
  background:linear-gradient(180deg,#0B0C0E,#121319);color:#fff;}
.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;}
.t02-cta-band-track.r1{animation:t02BandL 34s linear infinite;top:32%;}
.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%);}}
.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%);}}
.t02-cta-band-in{position:relative;z-index:2;text-align:center;max-width:940px;margin:0 auto;
  padding:0 clamp(22px,5vw,56px);}
.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);}
.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);}}
.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;}
.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;}
.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);}
.t02-cta-band-actions{margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
.t02-cta-band-actions .lp-btn-primary{border:1.5px solid rgba(255,255,255,.85);}
.t02-cta-band-actions .lp-btn-primary:hover{border-color:var(--rose-500);}
.t02-cta-band-actions .lp-btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);}
.t02-cta-band-actions .lp-btn-ghost:hover{border-color:var(--rose-400);color:var(--rose-300);}
@media(max-width:760px){.t02-cta-band{padding:72px 0;}}
@media(prefers-reduced-motion:reduce){
  .t02-cta-band-track,.t02-cta-band::before,.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-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-guide.is-on{opacity:1;}
.wdi-guide.is-hidden{opacity:0;}

/* core disc */
.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-guide-core svg{position:absolute;inset:0;width:44px;height:44px;}
.wdi-guide-core .g-ring{fill:none;stroke:rgba(11,12,14,.1);stroke-width:1.6;}
.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-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-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-guide:not(.is-left) .wdi-guide-thread{right:-16px;}
.wdi-guide.is-left  .wdi-guide-thread{left:-16px;}

/* label sits inboard of the core, so it can never leave the viewport */
.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-guide:not(.is-left) .wdi-guide-label{right:calc(100% + 12px);}
.wdi-guide.is-left  .wdi-guide-label{left:calc(100% + 12px);}

/* settle when it hops to the next section */
.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-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-guide.on-dark .wdi-guide-num{color:#fff;}
.wdi-guide.on-dark .wdi-guide-core .g-ring{stroke:rgba(255,255,255,.16);}
.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-guide-label{display:none;}}
@media(max-width:680px){.wdi-guide{display:none;}}
@media(prefers-reduced-motion:reduce){.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-wf-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-wf-page > section > .wrap,
#wdi-wf-page > section > .svv-wrap,
#wdi-wf-page > section > .ivv-wrap,
#wdi-wf-page > section > .hb-wrap,
#wdi-wf-page > section > .tsm-head,
#wdi-wf-page > section > .tsm-rows,
#wdi-wf-page > section > .lp-eco-head,
#wdi-wf-page > section > .lp-eco-strip{position:relative;z-index:1;}

/* --- drifting aura: two soft brand-coloured masses, slow opposing paths --- */
#wdi-wf-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-wf-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-wf-page > section:nth-of-type(even)::before{animation-direction:reverse;animation-duration:30s;}
#wdi-wf-page > section:nth-of-type(even)::after{animation-direction:reverse;animation-duration:27s;}
#wdi-wf-page > section:nth-of-type(3n)::before{animation-duration:34s;}
#wdi-wf-page > section:nth-of-type(3n)::after{animation-duration:29s;}

/* --- dark sections get a slowly travelling hairline grid on top of the aura --- */
.lp-band, .piw-sec, .teb-sec, .tsm-sec, .lp-final, .outcomes--a{overflow:hidden;}
.lp-band::before, .piw-sec::before, .teb-sec::before, .tsm-sec::before, .lp-final::before, .outcomes--a::before{
  background:radial-gradient(circle,rgba(249,47,100,.14),transparent 66%);
}
.lp-band::after, .piw-sec::after, .teb-sec::after, .tsm-sec::after, .lp-final::after, .outcomes--a::after{
  background:radial-gradient(circle,rgba(122,0,255,.12),transparent 66%);
}
.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-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-wf-page > section:first-of-type::before,
#wdi-wf-page > section:first-of-type::after{display:none;}

@media(prefers-reduced-motion:reduce){
  #wdi-wf-page > section::before,#wdi-wf-page > section::after,
  .wdi-amb-grid,.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-wf-page > section::before,
#wdi-wf-page > section::after,
#wdi-wf-page > section .wdi-amb-grid,
#wdi-wf-page > section .wdi-amb-dots{animation-play-state:paused!important;}
#wdi-wf-page > section.is-live::before,
#wdi-wf-page > section.is-live::after,
#wdi-wf-page > section.is-live .wdi-amb-grid,
#wdi-wf-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-wf-page > section .wdi-amb-grid,
#wdi-wf-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-wf-page > section::before,
#wdi-wf-page > section::after{right:0!important;max-width:100%!important;}


#wdi-wf-page{--maxw:1280px;--void:#000;--ash:#9a9a9a;--silver:#bdbdbd;}
/* ---- Hero V1 · Constellation (Mobile Hero) ---- */
.hb1{position:relative;width:100%;min-height:100svh;background:var(--void);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;font-family:var(--font);}
.hb1-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;}
.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%);}
.hb1-crumb{position:relative;z-index:4;max-width:var(--maxw);width:100%;margin:0 auto;padding:26px clamp(22px,5vw,56px) 0;}
.hb1-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:400;color:var(--ash);}
.hb1-crumb li+li::before{content:"/";margin-right:8px;color:#4a4a4a;}
.hb1-crumb a{color:var(--ash);text-decoration:none;transition:color .25s;}
.hb1-crumb a:hover{color:#fff;}
.hb1-crumb [aria-current]{color:#fff;}
.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);}
.hb1-copy{max-width:660px;}
.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;}
.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);}
.hb1-h{font-size:clamp(40px,6.2vw,84px);font-weight:400;letter-spacing:-0.045em;line-height:1;color:#fff;text-wrap:balance;}
.hb1-h .l1,.hb1-h .l2{display:block;opacity:0;transform:translateY(26px);animation:hb1Rise 1s cubic-bezier(.2,.7,.2,1) forwards;}
.hb1-h .l1{animation-delay:.18s;}
.hb1-h .l2{animation-delay:.3s;}
.hb1-h .accent{color:#FF6F92;}
.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;}
.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;}
.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;}
.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;}
.hb1-btn svg{width:16px;height:16px;transition:transform .3s;}
.hb1-btn:hover{transform:translateY(-2px);background:var(--rose-600);box-shadow:0 18px 40px rgba(249,47,100,.42);}
.hb1-btn:hover svg{transform:translateX(3px);}
.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;}
.hb1-ghost svg{width:15px;height:15px;}
.hb1-ghost:hover{color:#fff;gap:12px;}
.hb1-labels{margin-top:clamp(28px,3.4vw,42px);display:flex;flex-wrap:wrap;gap:9px;opacity:0;animation:hb1Fade 1s ease .72s forwards;}
.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;}
.hb1-labels span:hover{border-color:var(--rose-400);color:#fff;transform:translateY(-2px);}
.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){.hb1-eyebrow,.hb1-h .l1,.hb1-h .l2,.hb1-sub,.hb1-aeo,.hb1-cta,.hb1-labels,.hb1-meta{animation:none;opacity:1;transform:none;}}
@media(max-width:820px){.hb1{min-height:auto;}.hb1-veil{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.62));}}
/* ---- Hero 05 (AI Solutions) — ported, WDI rose/violet/blue only ---- */
.hb{position:relative;width:100%;overflow:hidden;isolation:isolate;font-family:var(--font);}
.hb-wrap{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,56px);}
.hb-body{padding:clamp(52px,7vw,96px) 0 clamp(60px,8vw,110px);}
.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;}
.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;}
.hbtn svg{width:16px;height:16px;transition:transform .3s;}
.hbtn:hover svg{transform:translateX(3px);}
.hbtn-lg{font-size:16px;padding:16px 30px;}
.hbtn-ink{background:var(--rose-500);color:#fff;border-color:var(--rose-500);box-shadow:0 14px 30px rgba(249,47,100,.28);}
.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);}
.hbtn-line{background:#fff;color:var(--ink);border-color:var(--line-2);}
.hbtn-line:hover{border-color:var(--ink);transform:translateY(-2px);}
.hb-rise{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);}
.hb.in .hb-rise.d1{transition-delay:.08s;}
.hb.in .hb-rise.d2{transition-delay:.16s;}
.hb.in .hb-rise.d3{transition-delay:.24s;}
.hb.in .hb-rise.d4{transition-delay:.32s;}
.hb.in .hb-rise.d5{transition-delay:.40s;}
.hb5{background:#fff;color:var(--ink);text-align:center;}
.hb5-blobs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.hb5-blobs span{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(72px);opacity:.42;}
.hb5-blobs .a{top:-10%;left:5%;background:radial-gradient(circle,#F92F64,transparent 68%);animation:hb5f1 20s ease-in-out infinite;}
.hb5-blobs .b{top:-6%;right:7%;background:radial-gradient(circle,#7A00FF,transparent 68%);animation:hb5f2 24s ease-in-out infinite;}
.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);}}
.hb5-pill{background:#F3F4F6;color:var(--ink-2);border:1px solid var(--line);}
.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;}
.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%;}}
.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;}
.hb5-aeo{margin:14px auto 0;font-size:15px;font-weight:300;line-height:1.6;color:var(--muted);max-width:70ch;}
.hb5-cta{margin-top:30px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
.hb5-orbit{margin-top:clamp(36px,4.4vw,56px);display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.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;}
.hb5-orbit span:hover{transform:translateY(-2px);border-color:var(--rose-300);color:var(--rose-600);}
@media(prefers-reduced-motion:reduce){.hb5-blobs span,.hb5-h .g{animation:none;}}
/* no external imagery: local gradient stands in for stock/avatar images */
.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;}

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

/* ---- Section 12 · governance (reuses lp-cmp + lp-gov from ppc-v2.css) ---- */
.t01-mini{position:relative;background:#08090B;color:#fff;text-align:center;overflow:hidden;isolation:isolate;}
.t01-mini .lp-h{color:#fff;}
.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%);}
.t01-mini .wrap{position:relative;z-index:1;}
.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);}
.t01-mini .lp-inline-cta{margin-top:28px;}
/* Product Intelligence — give the stage room so it does not compress */
.piw-sec{padding:clamp(72px,8vw,120px) 0;}
.piw-head{max-width:900px;margin:0 auto clamp(38px,4.6vw,60px);text-align:center;}
.piw-head .lp-eyebrow{justify-content:center;}
.piw-head .lp-h{text-align:center;}
.piw-head .lp-aeo{margin-left:auto;margin-right:auto;text-align:center;}
.piw-stage{max-width:1120px;min-height:clamp(520px,52vw,660px);margin-left:auto;margin-right:auto;}
.piw-note{max-width:62ch;margin:clamp(26px,3vw,38px) auto 0;text-align:center;}
.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){.lp-faq .fqa-grid{grid-template-columns:1fr;gap:24px;}}


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

/* ============================================================
   05 · WHAT WE DO — service grid, parallaxes over the client wall
   ============================================================ */
.mws{position:relative;z-index:2;background:#0B0C0E;color:#fff;
  padding:clamp(64px,7.4vw,112px) 0 clamp(56px,6.4vw,96px);}
.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);}
.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);}
.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;}
.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);}
.mws-rule{margin:clamp(30px,3.4vw,46px) 0 0;height:1px;background:rgba(255,255,255,.14);}
.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);}
.mws-card{position:relative;display:flex;flex-direction:column;}
.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);}
.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;}
.mws-ic svg{width:24px;height:24px;}
.mws-card:hover .mws-ic{background:var(--rose-500);color:#fff;}
.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;}
.mws-card p{margin-top:14px;font-size:14.5px;font-weight:300;line-height:1.66;
  color:rgba(255,255,255,.58);}
.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;}
.mws-go span{border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:3px;transition:border-color .3s ease;}
.mws-go svg{width:15px;height:15px;}
.mws-go:hover{color:var(--rose-300);gap:14px;}
.mws-go:hover span{border-color:var(--rose-400);}
.mws-go:focus-visible{outline:2px solid var(--rose-400);outline-offset:4px;}
@media(max-width:1020px){.mws-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.mws-grid{grid-template-columns:1fr;}.mws-card h3{max-width:none;}}
/* service titles: every card holds two lines */
.mws-card h3{max-width:14ch;min-height:2.28em;}
@media(max-width:680px){.mws-card h3{max-width:14ch;}}
@media(max-width:940px){
  .mws-pin{position:relative;top:auto;}
}
@media(max-width:940px){
  
  .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){
  .mws-pin{position:relative;top:auto;}
  .mws::after{display:none;}
}
/* clean reveal: services scrolls fully, holds, then the grid covers it */



@media(max-width:940px){
  
  .mws-pin{position:relative;top:auto;}
}
.mws-h{font-size:clamp(34px,5vw,76px);}
.mws-lead{margin-top:22px;font-size:clamp(15px,1.25vw,17px);max-width:74ch;}
.mws-rule{margin-top:clamp(30px,3.4vw,46px);}
.mws-grid{margin-top:clamp(34px,4vw,56px);gap:clamp(30px,3.6vw,64px) clamp(30px,3.6vw,58px);}
.mws-ic{width:52px;height:52px;}
.mws-ic svg{width:24px;height:24px;}
.mws-card h3{margin-top:clamp(20px,2.2vw,28px);font-size:clamp(20px,1.9vw,27px);
  max-width:14ch;min-height:2.28em;}
.mws-card p{margin-top:14px;font-size:14.5px;line-height:1.66;}
.mws-go{padding-top:clamp(18px,2vw,26px);font-size:14px;}
/* services + decisions: normal document flow, one consistent scale */
.mws{position:relative;z-index:1;background:#0B0C0E;padding:0;}
/* service + decision card headings */
.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 */
.mws-card h3,.mdg-cell h3,.mrs-cell h3,.mte-cell h3{
  font-size:clamp(20px,2.2vw,34px)!important;}
/* grid items: subtle grey wash on hover, plus the rose circle cursor */
.mws-card,.mdg-cell,.mrs-cell,.mte-cell{transition:background .38s ease,transform .5s var(--ease);}
.mws-card,.mte-cell{border-radius:16px;padding:clamp(20px,2.2vw,28px);margin:calc(-1 * clamp(20px,2.2vw,28px));}
.mws-card:hover{background:rgba(255,255,255,.05);}
@media(hover:none){
  .mws-card,.mdg-cell,.mrs-cell,.mte-cell{cursor:auto!important;}
}
.mws-h{font-size:clamp(34px,5vw,76px);}
.mws-lead{margin-top:22px;font-size:clamp(15px,1.25vw,17px);max-width:74ch;}
.mws-rule{margin-top:clamp(30px,3.4vw,46px);}
.mws-grid{margin-top:clamp(34px,4vw,56px);gap:clamp(30px,3.6vw,64px) clamp(30px,3.6vw,58px);}
.mws-ic{width:52px;height:52px;}
.mws-ic svg{width:24px;height:24px;}
.mws-card h3{margin-top:clamp(20px,2.2vw,28px);font-size:clamp(20px,1.9vw,27px);
  max-width:14ch;min-height:2.28em;}
.mws-card p{margin-top:14px;font-size:14.5px;line-height:1.66;}
.mws-go{padding-top:clamp(18px,2vw,26px);font-size:14px;}
/* services + decisions: normal document flow, one consistent scale */
.mws{position:relative;z-index:1;background:#0B0C0E;padding:0;}
@media(max-width:940px){
  .mws-drop{overflow:visible;border-radius:0;box-shadow:none;}
  .mws-drop .mws-track{transform:none;}
  .mws-drop::before,.mws-drop::after{display:none;}
  .mlw{transform:none;}
}
@media(prefers-reduced-motion:reduce){.mws-drop .mws-track{transform:none;}.mlw{transform:none;}.mws-drop{border-radius:0;box-shadow:none;}}
@media(max-width:940px),(prefers-reduced-motion:reduce){
  .mws-drop .mws-eye,.mws-drop .mws-h,.mws-drop .mws-lead,
  .mws-drop .mws-rule,.mws-drop .mws-card,.mws-drop .mws-h .w{opacity:1;transform:none;}
}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
.wdi-eye,
.mcl-eye,.mws-eye,.mdg-eye,.msol-eyebrow,.mind-eyebrow,.pr-eyebrow,
.mte-eyebrow,.mai-eyebrow,.ts-eyebrow,.aisay-eye,.wby-eye,.mrs-eye,
.fq-eyebrow,.spm-eye,.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-eye::before,
.mcl-eye::before,.mws-eye::before,.mdg-eye::before,.msol-eyebrow::before,.mind-eyebrow::before,
.pr-eyebrow::before,.mte-eyebrow::before,.mai-eyebrow::before,.ts-eyebrow::before,
.aisay-eye::before,.wby-eye::before,.mrs-eye::before,.fq-eyebrow::before,.spm-eye::before,
.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 */
.mcl-eye>i,.mws-eye>i,.msol-eyebrow>i,.mind-eyebrow>i,.mte-eyebrow>i,.mai-eyebrow>i,.aisay-eye>i{display:none!important;}
/* on dark grounds the rose reads brighter */
.mcl-eye,.mws-eye,.mdg-eye,.mai-eyebrow,.aisay-eye,.ts-eyebrow,.pp-projects-head .eyebrow{color:#FF7BA3!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-wf-page section .wdi-eye,
#wdi-wf-page section .mcl-eye,#wdi-wf-page section .mws-eye,#wdi-wf-page section .mdg-eye,#wdi-wf-page section .msol-eyebrow,
#wdi-wf-page section .mind-eyebrow,#wdi-wf-page section .pr-eyebrow,#wdi-wf-page section .mte-eyebrow,
#wdi-wf-page section .mai-eyebrow,#wdi-wf-page section .ts-eyebrow,#wdi-wf-page section .aisay-eye,
#wdi-wf-page section .wby-eye,#wdi-wf-page section .mrs-eye,#wdi-wf-page section .fq-eyebrow,#wdi-wf-page section .spm-eye,
#wdi-wf-page section .avv-eyebrow,#wdi-wf-page section .lfv-eyebrow,
#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-wf-page section .wdi-eye::before,
#wdi-wf-page section .mcl-eye::before,#wdi-wf-page section .mws-eye::before,#wdi-wf-page section .mdg-eye::before,
#wdi-wf-page section .msol-eyebrow::before,#wdi-wf-page section .mind-eyebrow::before,#wdi-wf-page section .pr-eyebrow::before,
#wdi-wf-page section .mte-eyebrow::before,#wdi-wf-page section .mai-eyebrow::before,#wdi-wf-page section .ts-eyebrow::before,
#wdi-wf-page section .aisay-eye::before,#wdi-wf-page section .wby-eye::before,#wdi-wf-page section .mrs-eye::before,
#wdi-wf-page section .fq-eyebrow::before,#wdi-wf-page section .spm-eye::before,
#wdi-wf-page section .avv-eyebrow::before,#wdi-wf-page section .lfv-eyebrow::before,
#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 */
section.mws.mws-flat{padding:clamp(112px,13vw,184px) 0 clamp(120px,14vw,200px)!important;height:auto!important;min-height:0!important;}
.mws-flat .mws-head{margin-bottom:clamp(36px,4vw,56px);}
.mws-flat .mws-rule{margin-bottom:clamp(40px,4.5vw,64px);}
@media(max-width:760px){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
   ============================================================ */
.spm{background:#fff;padding:clamp(64px,7.4vw,112px) 0;}
.spm-head{text-align:center;max-width:900px;margin:0 auto clamp(38px,4.4vw,64px);}
.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);}
.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);}
.spm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,24px);}
.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);}
.spm-card:hover{transform:translateY(-4px);}
.spm-card.t1{background:linear-gradient(160deg,#F2F2F4,#E9EAEE);}
.spm-card.t2{background:linear-gradient(160deg,#F4EEFF,#EDE4FF);}
.spm-card.t3{background:linear-gradient(160deg,#FFEFF4,#FFE3EC);}
.spm-card.t4{background:linear-gradient(160deg,#EAF6F1,#DFF1E9);}
.spm-card.t5{background:linear-gradient(160deg,#EFF3FA,#E4EBF7);}
.spm-card.t6{background:linear-gradient(160deg,#F5F3EE,#EDE9E1);}
.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);}
.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 */
.spm-art{position:relative;flex:1;margin-top:clamp(22px,2.4vw,34px);min-height:180px;}
@media(max-width:900px){
  .spm-grid{grid-template-columns:1fr;}
  .spm-card{min-height:0;}
  .spm-art{min-height:230px;}
}
@media(prefers-reduced-motion:reduce){.spm-card{transition:none;}}
}

/* cards keep the floating detail card only */
.spm-art{min-height:130px;}
/* ============================================================
   §06 device: hyper-real iPhone shell, cropped by the card edge
   ============================================================ */
.spm-card{overflow:hidden;}
.spm-art{min-height:clamp(210px,22vw,300px);}
.dvc{position:absolute;right:6%;top:6%;width:clamp(184px,19vw,252px);z-index:1;
  transition:transform .8s var(--ease);}
.spm-card:hover .dvc{transform:translateY(-6px);}
@media(max-width:900px){
  .dvc{position:relative;right:auto;top:auto;margin:0 auto;width:min(230px,64%);}
  .spm-float,.spm-f-b{position:relative;left:auto;bottom:auto;margin-top:16px;transform:none;}
}
@media(prefers-reduced-motion:reduce){.dvc{transition:none;}}
/* ---- varied composition, per the reference ---- */
.spm-art{position:relative;}
.dv-r .dvc{right:2%;left:auto;top:2%;}
.dv-l .dvc{left:6%;right:auto;top:2%;}
.dv-low .dvc{top:-12%;}
@media(max-width:900px){
  .dv-r .dvc,.dv-l .dvc,.dv-low .dvc{position:relative;left:auto;right:auto;top:auto;margin:0 auto;}
}
/* ============================================================
   §06 pseudo-bento: uneven spans, varied art, per-card link
   ============================================================ */
.spm-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;}
.spm-card{grid-column:span 3;min-height:0;padding:clamp(24px,2.4vw,34px);}
.spm-card:nth-child(1){grid-column:span 4;}
.spm-card:nth-child(2){grid-column:span 2;}
.spm-card:nth-child(3){grid-column:span 2;}
.spm-card:nth-child(4){grid-column:span 4;}
.spm-card:nth-child(5){grid-column:span 3;}
.spm-card:nth-child(6){grid-column:span 3;}
.spm-copy p{max-width:38ch;}
/* art wells sized to their content, so no dead white space */
.spm-art{margin-top:clamp(16px,1.8vw,26px);min-height:clamp(200px,20vw,272px);}
.spm-art.a2,.spm-art.a3,.spm-art.a6{min-height:clamp(190px,19vw,240px);}
/* device variants */
.dvc{position:absolute;transition:transform .8s var(--ease);}
.dv-full{right:-2%;top:0;width:clamp(158px,15.5vw,206px);}
.spm-card:hover .dvc{transform:translateY(-6px);}
.spm-card:hover .win{transform:translateY(-6px);}
/* floating cards, hyper-real */
.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);}
.fc-list{left:0;bottom:8%;width:clamp(200px,21vw,268px);padding:6px 14px;}
.fc-r{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F4F4F6;}
.fc-r:last-child{border-bottom:0;}
.fc-r i{width:16px;height:16px;border-radius:5px;flex:none;background:#EFEFF3;}
.fc-r .ic-a{background:linear-gradient(140deg,#FFD9E4,#FFB0C7);}
.fc-r .ic-b{background:linear-gradient(140deg,#DCE7FF,#B9CDFF);}
.fc-r .ic-c{background:linear-gradient(140deg,#DFF3E7,#BEE6D0);}
.fc-r span{flex:1;display:flex;flex-direction:column;}
.fc-r b{font-size:10.5px;font-weight:600;color:var(--ink);}
.fc-r em{font-style:normal;font-size:9.5px;color:var(--muted);}
.fc-r u{text-decoration:none;font-size:12px;color:var(--line-2);}
/* stacked card treatment (no device) */
.fc-stack{position:relative;left:auto;bottom:auto;width:100%;background:none;box-shadow:none;}
.fc-ghost{position:absolute;left:6%;top:-4%;right:10%;height:88%;border-radius:14px;
  background:rgba(11,12,14,.05);transform:rotate(-4deg);}
.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);}
.spm-card:hover .fc-card{transform:rotate(-2deg) translateY(-5px);}
.fc-head{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid #F2F2F5;}
.fc-head .av{width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--rose-400),var(--violet));}
.fc-head span{display:flex;flex-direction:column;}
.fc-head b{font-size:11.5px;font-weight:600;color:var(--ink);}
.fc-head em{font-style:normal;font-size:9.5px;color:var(--muted);}
.fc-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px;}
.fc-shots i{display:block;aspect-ratio:3/4;border-radius:7px;}
.fc-note{display:block;margin-top:10px;font-size:9.5px;color:var(--muted);}
@media(max-width:1000px){
  .spm-grid{grid-template-columns:repeat(2,1fr);}
  .spm-card:nth-child(n){grid-column:span 1;}
}
@media(max-width:760px){
  .spm-grid{grid-template-columns:1fr;}
  .dvc,.win,.fc-list,.fc-mini{position:relative;left:auto;right:auto;top:auto;bottom:auto;
    margin:0 auto;width:min(230px,72%);transform:none;}
  .fc-mini{margin-top:14px;width:auto;}
}
/* ---- squad card with real faces ---- */
.av-img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;}
/* photo tiles now carry real imagery */
.ap-tiles i,.fc-shots i{background-size:cover;background-position:center;}
/* [1][2] portal stack: three overlapping windows */
.spm-art.a4{position:relative;}
.spm-card:hover .spm-copy{transform:none;}
/* ---- a4: three genuine website screens, tightly stacked ---- */
.spm-art.a4{position:relative;overflow:hidden;}
.spm-card:hover .site.s3{transform:scale(.92) translateY(-6px);opacity:.55;}
.spm-card:hover .site.s2{transform:scale(.97) translateY(-3px);opacity:.85;}
/* cloud pipeline card */
.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);}
.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);}
.cld-steps{display:flex;gap:6px;margin-top:10px;}
.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;}
.cld-steps i{font-style:normal;font-size:9px;}
.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);}
.cld-live i{width:5px;height:5px;border-radius:50%;background:var(--rose-500);}
/* dedicated squad card */
.spm-art.a6{position:relative;overflow:hidden;}
.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);}
.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;}
.sq-row{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid rgba(11,12,14,.07);}
.sq-row:first-of-type{border-top:0;}
.sq-row img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none;}
.sq-row b{flex:1;font-size:9.5px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);}
.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 ---- */
.spm-grid{display:grid!important;grid-template-columns:repeat(6,1fr)!important;
  gap:clamp(14px,1.6vw,22px)!important;align-items:stretch;}
.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);}
.spm-card.t1{grid-column:span 4;}
.spm-card.t2{grid-column:span 2;}
.spm-card.t3{grid-column:span 2;}
.spm-card.t4{grid-column:span 4;}
.spm-card.t5{grid-column:span 3;}
.spm-card.t6{grid-column:span 3;}
.spm-copy{position:relative;z-index:2;}
.spm-art{position:relative;flex:1;min-height:clamp(150px,14vw,200px);margin-top:clamp(18px,2vw,26px);}
@media(max-width:1020px){
  .spm-grid{grid-template-columns:repeat(2,1fr)!important;}
  .spm-card.t1,.spm-card.t2,.spm-card.t3,
  .spm-card.t4,.spm-card.t5,.spm-card.t6{grid-column:span 1;}
}
@media(max-width:680px){
  .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 ---- */
.spm-grid{position:relative;}
.spm-card{position:relative;}
.spm-shot{position:absolute;display:block;object-fit:cover;pointer-events:none;}
.s-t1{width:385px;max-width:70%;height:auto;aspect-ratio:385/802;left:456px;top:-117px;border-radius:59px;}
.s-t3{width:351px;height:398px;max-width:100%;aspect-ratio:3210/3687;left:83px;top:-34px;}
.s-t4{width:2860px;max-width:100%;height:auto;aspect-ratio:2860/6722;top:115px;}
.s-t5{width:2787px;max-width:100%;height:auto;aspect-ratio:2787/2090;left:-195px;top:32px;}
.s-t5b{width:196px;height:396px;max-width:100%;aspect-ratio:800/1610;left:461px;top:-180px;border-radius:40px;}
.spm-art.a4{width:838px;height:269px;}
.spm-card.t5 .cld{left:319px;top:86px;position:absolute;width:306px;height:93px;}
@media(max-width:900px){.spm-shot{display:none;}.spm-art.a4{width:auto;height:auto;}}
/* dedicated-teams squad panel: repositioned per direct edit */
.spm-card.t6 .sq{left:13px;top:0;position:absolute;width:481px;height:158px;}
@media(max-width:900px){.spm-card.t6 .sq{position:static;height:auto;}}
/* t4 screenshot: card-level, replacing the in-heading placement */
.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-eye,
.mcl-eye,.mws-eye,.mdg-eye,.msol-eyebrow,.mind-eyebrow,.pr-eyebrow,
.mte-eyebrow,.mai-eyebrow,.ts-eyebrow,.aisay-eye,.wby-eye,.mrs-eye,
.fq-eyebrow,.spm-eye,.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-eye::before,
.mcl-eye::before,.mws-eye::before,.mdg-eye::before,.msol-eyebrow::before,.mind-eyebrow::before,
.pr-eyebrow::before,.mte-eyebrow::before,.mai-eyebrow::before,.ts-eyebrow::before,
.aisay-eye::before,.wby-eye::before,.mrs-eye::before,.fq-eyebrow::before,.spm-eye::before,
.pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
.avv-sec.av-a .wdi-eye{margin-bottom:0!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-wf-page section .wdi-eye,
#wdi-wf-page section .mcl-eye,#wdi-wf-page section .mws-eye,#wdi-wf-page section .mdg-eye,#wdi-wf-page section .msol-eyebrow,
#wdi-wf-page section .mind-eyebrow,#wdi-wf-page section .pr-eyebrow,#wdi-wf-page section .mte-eyebrow,
#wdi-wf-page section .mai-eyebrow,#wdi-wf-page section .ts-eyebrow,#wdi-wf-page section .aisay-eye,
#wdi-wf-page section .wby-eye,#wdi-wf-page section .mrs-eye,#wdi-wf-page section .fq-eyebrow,#wdi-wf-page section .spm-eye,
#wdi-wf-page section .avv-eyebrow,#wdi-wf-page section .lfv-eyebrow,
#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-wf-page section .wdi-eye::before,
#wdi-wf-page section .mcl-eye::before,#wdi-wf-page section .mws-eye::before,#wdi-wf-page section .mdg-eye::before,
#wdi-wf-page section .msol-eyebrow::before,#wdi-wf-page section .mind-eyebrow::before,#wdi-wf-page section .pr-eyebrow::before,
#wdi-wf-page section .mte-eyebrow::before,#wdi-wf-page section .mai-eyebrow::before,#wdi-wf-page section .ts-eyebrow::before,
#wdi-wf-page section .aisay-eye::before,#wdi-wf-page section .wby-eye::before,#wdi-wf-page section .mrs-eye::before,
#wdi-wf-page section .fq-eyebrow::before,#wdi-wf-page section .spm-eye::before,
#wdi-wf-page section .avv-eyebrow::before,#wdi-wf-page section .lfv-eyebrow::before,
#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 ---- */
.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;}
.spm-grid .spm-card.in{opacity:1;transform:none;}
.spm-grid .spm-card:nth-child(1).in{transition-delay:0ms;}
.spm-grid .spm-card:nth-child(2).in{transition-delay:90ms;}
.spm-grid .spm-card:nth-child(3).in{transition-delay:180ms;}
.spm-grid .spm-card:nth-child(4).in{transition-delay:120ms;}
.spm-grid .spm-card:nth-child(5).in{transition-delay:210ms;}
.spm-grid .spm-card:nth-child(6).in{transition-delay:300ms;}
.spm-head .spm-eye,.spm-head .spm-h,.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);}
.spm-head.in .spm-eye{opacity:1;transform:none;}
.spm-head.in .spm-h{opacity:1;transform:none;transition-delay:90ms;}
.spm-head.in .spm-lead{opacity:1;transform:none;transition-delay:180ms;}
@media(prefers-reduced-motion:reduce){
  .spm-grid .spm-card,.spm-head .spm-eye,.spm-head .spm-h,.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
   ============================================================ */
.mdg{position:relative;z-index:3;background:#fff;
  padding:clamp(64px,7.4vw,112px) 0 0;}
.mdg-head{max-width:var(--measure,1440px);margin:0 auto;padding:0 var(--gutter,clamp(24px,4vw,64px));}
.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;}
.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;}
.mdg-h .amp{color:var(--muted);}
.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);}
.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;}
.mdg-cta svg{width:15px;height:15px;transition:transform .35s var(--ease);}
.mdg-cta:hover{background:var(--rose-500);transform:translateY(-2px);box-shadow:0 16px 34px rgba(249,47,100,.3);}
.mdg-cta:hover svg{transform:translateX(3px);}
.mdg-cta:focus-visible{outline:2px solid var(--rose-500);outline-offset:4px;}
/* 3 × 2 gradient blocks, edge to edge */
.mdg-grid{margin-top:clamp(48px,5.6vw,88px);display:grid;grid-template-columns:repeat(3,1fr);}
.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);}
.mdg-cell::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .5s ease;}
.mdg-cell:nth-child(1)::before{background:linear-gradient(155deg,#0B0C0E,#17121C 58%,#1B0F17);}
.mdg-cell:nth-child(2)::before{background:linear-gradient(155deg,#F5F3F5,#EFEBF2);}
.mdg-cell:nth-child(3)::before{background:linear-gradient(155deg,#FBFBFC,#F4F4F6);}
.mdg-cell:nth-child(4)::before{background:linear-gradient(155deg,#FBFBFC,#F4F4F6);}
.mdg-cell:nth-child(5)::before{background:linear-gradient(155deg,#F5F3F5,#EFEBF2);}
.mdg-cell:nth-child(6)::before{background:linear-gradient(155deg,#0B0C0E,#17121C 58%,#1B0F17);}
/* rose bloom rises on hover */
.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%);}
.mdg-cell:hover::after{opacity:1;}
.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);}
.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;}
.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 */
.mdg-cell:nth-child(1) h3,.mdg-cell:nth-child(6) h3{color:#fff;}
.mdg-cell:nth-child(1) p,.mdg-cell:nth-child(6) p{color:rgba(255,255,255,.6);}
.mdg-cell:nth-child(1) .mdg-n,.mdg-cell:nth-child(6) .mdg-n{color:rgba(255,255,255,.34);}
@media(max-width:1020px){.mdg-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.mdg-grid{grid-template-columns:1fr;}.mdg-cell{min-height:240px;}}
/* light cells sit on tinted gradients — raise body copy and numerals to pass AA */
.mdg-cell:not(:nth-child(1)):not(:nth-child(6)) p{color:var(--ink-2);}
.mdg-n{font-size:12px;color:var(--muted);}
.mdg-cell:nth-child(1) .mdg-n,.mdg-cell:nth-child(6) .mdg-n{color:rgba(255,255,255,.72);}
/* ---- WDI eyebrow + button treatment ---- */
.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;}
.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);}
.mdg-h .amp{background:linear-gradient(102deg,var(--rose-600),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.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 ---- */

.mdg{position:relative;z-index:3;border-radius:28px 28px 0 0;
  box-shadow:0 -28px 60px rgba(11,12,14,.28);}
.mdg-cell:hover .mdg-ic{background:var(--rose-500);color:#fff;}
.mdg-cell:nth-child(1) .mdg-ic,.mdg-cell:nth-child(6) .mdg-ic{background:rgba(255,255,255,.1);color:#fff;}
.mdg-cell{justify-content:space-between;}
.mdg-body{margin-top:clamp(22px,2.4vw,32px);}
.mdg-cell:hover .mdg-go,.mdg-cell:focus-within .mdg-go{opacity:1;transform:none;}
.mdg-cell:nth-child(1) .mdg-go,.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 */
.mdg{position:relative;z-index:3;}
/* decisions header: title left, paragraph right */
.mdg-head-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:end;}
.mdg-head-split .mdg-eye{grid-column:1;}
.mdg-head-split .mdg-h{grid-column:1;margin-top:16px;}
.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){
  .mdg-head-split{grid-template-columns:1fr;gap:18px;}
  .mdg-head-split .mdg-lead{grid-column:1;grid-row:auto;}
}
.mdg{position:relative;z-index:2;border-radius:0;box-shadow:none;}
/* decisions headline accent: no gradient */
.mdg-h .amp{background:none!important;-webkit-background-clip:border-box!important;
  background-clip:border-box!important;color:var(--muted)!important;}
.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 */
.mws-card h3,.mdg-cell h3,.mrs-cell h3,.mte-cell h3{
  font-size:clamp(20px,2.2vw,34px)!important;}
/* card body copy: weight 400, consistent size and colour across the grids */
.mdg-cell p,.mrs-cell p,.mte-cell p{font-weight:400!important;font-size:14.5px!important;}
/* grid items: subtle grey wash on hover, plus the rose circle cursor */
.mws-card,.mdg-cell,.mrs-cell,.mte-cell{transition:background .38s ease,transform .5s var(--ease);}
.mdg-cell:hover,.mrs-cell:hover{background:rgba(11,12,14,.04);}
.mdg-cell:nth-child(1):hover,.mdg-cell:nth-child(6):hover,
.mrs-cell:nth-child(1):hover,.mrs-cell:nth-child(5):hover{background:rgba(255,255,255,.06);}
@media(hover:none){
  .mws-card,.mdg-cell,.mrs-cell,.mte-cell{cursor:auto!important;}
}
.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);}
.mdg ~ section,.mdg ~ footer{position:relative;z-index:3;}
.mdg-head{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);}
.mdg-head-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:end;}
.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;}
.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;}
.mdg-h .amp{color:var(--muted);}
.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);}
.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;}
.mdg-cta svg{width:15px;height:15px;transition:transform .35s var(--ease);}
.mdg-cta:hover{background:var(--rose-500);transform:translateY(-2px);box-shadow:0 16px 34px rgba(249,47,100,.3);}
.mdg-cta:hover svg{transform:translateX(3px);}
.mdg-cta:focus-visible{outline:2px solid var(--rose-500);outline-offset:4px;}
/* 3 × 2 gradient blocks, edge to edge */
.mdg-grid{margin-top:clamp(48px,5.6vw,88px);display:grid;grid-template-columns:repeat(3,1fr);}
.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;}
.mdg-cell::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .5s ease;}
.mdg-cell:nth-child(1)::before,.mdg-cell:nth-child(6)::before{
  background:linear-gradient(155deg,#0B0C0E,#17121C 58%,#1B0F17);}
.mdg-cell:nth-child(2)::before,.mdg-cell:nth-child(5)::before{
  background:linear-gradient(155deg,#F5F3F5,#EFEBF2);}
.mdg-cell:nth-child(3)::before,.mdg-cell:nth-child(4)::before{
  background:linear-gradient(155deg,#FBFBFC,#F4F4F6);}
.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%);}
.mdg-cell:hover::after{opacity:1;}
.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);}
.mdg-cell h3{font-size:clamp(20px,2.2vw,34px);font-weight:500;letter-spacing:-0.035em;
  line-height:1.14;color:var(--ink);}
.mdg-cell p{margin-top:12px;font-size:14.5px;font-weight:400;line-height:1.62;color:var(--muted);
  max-width:38ch;}
.mdg-cell:nth-child(1) h3,.mdg-cell:nth-child(6) h3{color:#fff;}
.mdg-cell:nth-child(1) p,.mdg-cell:nth-child(6) p{color:rgba(255,255,255,.6);}
.mdg-cell:nth-child(1) .mdg-n,.mdg-cell:nth-child(6) .mdg-n{color:rgba(255,255,255,.34);}
/* hover pill */
.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;}
.mdg-pill svg{width:13px;height:13px;}
.mdg-cell:hover .mdg-pill,.mdg-cell:focus-within .mdg-pill{opacity:1;transform:none;pointer-events:auto;}
.mdg-pill:hover{background:var(--rose-500);gap:13px;}
.mdg-cell:nth-child(1) .mdg-pill,.mdg-cell:nth-child(6) .mdg-pill{background:#fff;color:var(--ink);}
.mdg-cell:nth-child(1) .mdg-pill:hover,.mdg-cell:nth-child(6) .mdg-pill:hover{background:var(--rose-500);color:#fff;}
.mdg-cell:hover .mdg-body{transform:translateY(-46px);}
.mdg-body{transition:transform .42s var(--ease);}
@media(hover:none){
  .mdg-pill{opacity:1;transform:none;pointer-events:auto;position:static;margin-top:18px;}
  .mdg-cell:hover .mdg-body{transform:none;}
}
@media(max-width:1020px){.mdg-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  .msu{position:relative;top:auto;}
  .mdg{border-radius:0;box-shadow:none;}
  .mdg-head-split{grid-template-columns:1fr;gap:18px;}
  .mdg-lead{grid-column:1;grid-row:auto;}
  .mdg-grid{grid-template-columns:1fr;}
  .mdg-cell{min-height:240px;}
}
.mdg{position:relative!important;z-index:auto!important;border-radius:0!important;box-shadow:none!important;}
/* decisions header: title left, paragraph right */
.mdg-head-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:end;}
.mdg-head-split .mdg-eye{grid-column:1;}
.mdg-head-split .mdg-h{grid-column:1;margin-top:16px;}
.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){
  .mdg-head-split{grid-template-columns:1fr;gap:18px;}
  .mdg-head-split .mdg-lead{grid-column:1;grid-row:auto;}
}
.mdg{position:relative;z-index:2;border-radius:0;box-shadow:none;}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
.wdi-eye,
.mcl-eye,.mws-eye,.mdg-eye,.msol-eyebrow,.mind-eyebrow,.pr-eyebrow,
.mte-eyebrow,.mai-eyebrow,.ts-eyebrow,.aisay-eye,.wby-eye,.mrs-eye,
.fq-eyebrow,.spm-eye,.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-eye::before,
.mcl-eye::before,.mws-eye::before,.mdg-eye::before,.msol-eyebrow::before,.mind-eyebrow::before,
.pr-eyebrow::before,.mte-eyebrow::before,.mai-eyebrow::before,.ts-eyebrow::before,
.aisay-eye::before,.wby-eye::before,.mrs-eye::before,.fq-eyebrow::before,.spm-eye::before,
.pp-projects-head .eyebrow::before{
  content:"";width:22px;height:1.5px;flex:none;background:currentColor;opacity:.85;}
/* on dark grounds the rose reads brighter */
.mcl-eye,.mws-eye,.mdg-eye,.mai-eyebrow,.aisay-eye,.ts-eyebrow,.pp-projects-head .eyebrow{color:#FF7BA3!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-wf-page section .wdi-eye,
#wdi-wf-page section .mcl-eye,#wdi-wf-page section .mws-eye,#wdi-wf-page section .mdg-eye,#wdi-wf-page section .msol-eyebrow,
#wdi-wf-page section .mind-eyebrow,#wdi-wf-page section .pr-eyebrow,#wdi-wf-page section .mte-eyebrow,
#wdi-wf-page section .mai-eyebrow,#wdi-wf-page section .ts-eyebrow,#wdi-wf-page section .aisay-eye,
#wdi-wf-page section .wby-eye,#wdi-wf-page section .mrs-eye,#wdi-wf-page section .fq-eyebrow,#wdi-wf-page section .spm-eye,
#wdi-wf-page section .avv-eyebrow,#wdi-wf-page section .lfv-eyebrow,
#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-wf-page section .wdi-eye::before,
#wdi-wf-page section .mcl-eye::before,#wdi-wf-page section .mws-eye::before,#wdi-wf-page section .mdg-eye::before,
#wdi-wf-page section .msol-eyebrow::before,#wdi-wf-page section .mind-eyebrow::before,#wdi-wf-page section .pr-eyebrow::before,
#wdi-wf-page section .mte-eyebrow::before,#wdi-wf-page section .mai-eyebrow::before,#wdi-wf-page section .ts-eyebrow::before,
#wdi-wf-page section .aisay-eye::before,#wdi-wf-page section .wby-eye::before,#wdi-wf-page section .mrs-eye::before,
#wdi-wf-page section .fq-eyebrow::before,#wdi-wf-page section .spm-eye::before,
#wdi-wf-page section .avv-eyebrow::before,#wdi-wf-page section .lfv-eyebrow::before,
#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 ---- */
.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;}
.mdg-grid .mdg-cell.in{opacity:1;transform:none;}
.mdg-grid .mdg-cell:nth-child(1).in{transition-delay:0ms;}
.mdg-grid .mdg-cell:nth-child(2).in{transition-delay:110ms;}
.mdg-grid .mdg-cell:nth-child(3).in{transition-delay:220ms;}
.mdg-grid .mdg-cell:nth-child(4).in{transition-delay:60ms;}
.mdg-grid .mdg-cell:nth-child(5).in{transition-delay:170ms;}
.mdg-grid .mdg-cell:nth-child(6).in{transition-delay:280ms;}
@media(prefers-reduced-motion:reduce){
  .mdg-grid .mdg-cell{opacity:1!important;transform:none!important;transition:none!important;}
}
/* leaving upward: a crisper, quicker exit than the entrance */
.mdg-grid .mdg-cell{transition:opacity .52s cubic-bezier(.4,0,.7,.2),transform .6s cubic-bezier(.4,0,.7,.2);}
.mdg-grid .mdg-cell.in{transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.15s cubic-bezier(.19,.66,.31,1);}
.mdg-grid .mdg-cell:nth-child(1):not(.in){transition-delay:140ms;}
.mdg-grid .mdg-cell:nth-child(2):not(.in){transition-delay:70ms;}
.mdg-grid .mdg-cell:nth-child(3):not(.in){transition-delay:0ms;}
.mdg-grid .mdg-cell:nth-child(4):not(.in){transition-delay:140ms;}
.mdg-grid .mdg-cell:nth-child(5):not(.in){transition-delay:70ms;}
.mdg-grid .mdg-cell:nth-child(6):not(.in){transition-delay:0ms;}
/* ============================================================
   10 · MOBILE PRODUCT SOLUTIONS — sticky rail + scrolling panels
   ============================================================ */
.msol{background:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(56px,6.4vw,96px);}
.msol-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,96px);align-items:start;}
/* left rail */
.msol-rail{position:sticky;top:clamp(80px,10vh,120px);align-self:start;}
.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);}
.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);}
.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);}
.msol-lead{margin:20px 0 0;max-width:52ch;font-size:14.5px;font-weight:400;line-height:1.68;
  color:var(--muted);}
.msol-list{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;}
.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;}
.msol-list .dot{width:5px;height:5px;border-radius:50%;background:var(--line-2);justify-self:center;
  transition:background .3s ease,transform .3s ease;}
.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;}
.msol-list .ar{opacity:0;color:var(--ink);transition:opacity .3s ease,transform .3s ease;transform:translateX(-4px);}
.msol-list .ar svg{width:15px;height:15px;display:block;}
.msol-list .t{font-size:15.5px;font-weight:400;letter-spacing:-0.01em;color:var(--faint);
  transition:color .3s ease;}
.msol-list button:hover .t{color:var(--ink-2);}
.msol-list button.on .dot{background:var(--rose-500);transform:scale(1.3);}
.msol-list button.on .n{color:var(--ink);}
.msol-list button.on .ar{opacity:1;transform:none;}
.msol-list button.on .t{color:var(--ink);}
.msol-list button:focus-visible{outline:2px solid var(--rose-500);outline-offset:3px;}
/* right panels */
.msol-panels{display:flex;flex-direction:column;gap:clamp(64px,9vw,150px);
  padding-top:clamp(0px,2vw,40px);}
.msol-panel-h{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.4vw,20px);align-items:baseline;}
.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;}
.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);}
.msol-tags{margin-top:clamp(18px,2vw,26px);display:flex;flex-wrap:wrap;gap:8px;}
.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;}
.msol-panel:hover .msol-tags span{background:#EAEAEE;}
.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){
  .msol-in{grid-template-columns:1fr;gap:34px;}
  .msol-rail{position:relative;top:auto;}
  .msol-panels{gap:56px;padding-top:0;}
}
/* header spans the section, rail carries a secondary title */
.msol-top{padding-bottom:clamp(30px,3.6vw,52px);}
.msol-h{font-size:clamp(34px,5vw,76px)!important;max-width:22ch;}
.msol-rule{margin-top:clamp(30px,3.4vw,46px);height:1px;background:var(--line);}
.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);}
.msol-lead{margin-top:18px!important;}
.msol-in{padding-top:clamp(30px,4vw,64px);}
/* solutions rail labels */
.msol-rail .t{font-size:17.5px;}
/* ============================================================
   10 · MOBILE PRODUCT SOLUTIONS — sticky rail + scrolling panels
   ============================================================ */
.msol{background:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(56px,6.4vw,96px);}
.msol-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,96px);align-items:start;}
/* left rail */
.msol-rail{position:sticky;top:clamp(80px,10vh,120px);align-self:start;}
.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);}
.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);}
.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);}
.msol-lead{margin:20px 0 0;max-width:52ch;font-size:14.5px;font-weight:400;line-height:1.68;
  color:var(--muted);}
.msol-list{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;}
.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;}
.msol-list .dot{width:5px;height:5px;border-radius:50%;background:var(--line-2);justify-self:center;
  transition:background .3s ease,transform .3s ease;}
.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;}
.msol-list .ar{opacity:0;color:var(--ink);transition:opacity .3s ease,transform .3s ease;transform:translateX(-4px);}
.msol-list .ar svg{width:15px;height:15px;display:block;}
.msol-list .t{font-size:15.5px;font-weight:400;letter-spacing:-0.01em;color:var(--faint);
  transition:color .3s ease;}
.msol-list button:hover .t{color:var(--ink-2);}
.msol-list button.on .dot{background:var(--rose-500);transform:scale(1.3);}
.msol-list button.on .n{color:var(--ink);}
.msol-list button.on .ar{opacity:1;transform:none;}
.msol-list button.on .t{color:var(--ink);}
.msol-list button:focus-visible{outline:2px solid var(--rose-500);outline-offset:3px;}
/* right panels */
.msol-panels{display:flex;flex-direction:column;gap:clamp(64px,9vw,150px);
  padding-top:clamp(0px,2vw,40px);}
.msol-panel-h{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.4vw,20px);align-items:baseline;}
.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;}
.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);}
.msol-tags{margin-top:clamp(18px,2vw,26px);display:flex;flex-wrap:wrap;gap:8px;}
.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;}
.msol-panel:hover .msol-tags span{background:#EAEAEE;}
.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){
  .msol-in{grid-template-columns:1fr;gap:34px;}
  .msol-rail{position:relative;top:auto;}
  .msol-panels{gap:56px;padding-top:0;}
}
/* header spans the section, rail carries a secondary title */
.msol-top{padding-bottom:clamp(30px,3.6vw,52px);}
.msol-h{font-size:clamp(34px,5vw,76px)!important;max-width:22ch;}
.msol-rule{margin-top:clamp(30px,3.4vw,46px);height:1px;background:var(--line);}
.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);}
.msol-lead{margin-top:18px!important;}
.msol-in{padding-top:clamp(30px,4vw,64px);}
/* solutions rail labels */
.msol-rail .t{font-size:17.5px;}
@media(max-width:760px){
  .msol,.t02-cta-band[data-screen-label="Recognition"]{position:relative!important;top:auto!important;bottom:auto!important;}
  .mind{border-radius:0!important;box-shadow:none!important;}
}
/* CTA and solutions stay in normal flow; industries simply overlaps as it arrives */
.msol{position:relative!important;top:auto!important;z-index:auto!important;}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
.wdi-eye,
.mcl-eye,.mws-eye,.mdg-eye,.msol-eyebrow,.mind-eyebrow,.pr-eyebrow,
.mte-eyebrow,.mai-eyebrow,.ts-eyebrow,.aisay-eye,.wby-eye,.mrs-eye,
.fq-eyebrow,.spm-eye,.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-eye::before,
.mcl-eye::before,.mws-eye::before,.mdg-eye::before,.msol-eyebrow::before,.mind-eyebrow::before,
.pr-eyebrow::before,.mte-eyebrow::before,.mai-eyebrow::before,.ts-eyebrow::before,
.aisay-eye::before,.wby-eye::before,.mrs-eye::before,.fq-eyebrow::before,.spm-eye::before,
.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 */
.mcl-eye>i,.mws-eye>i,.msol-eyebrow>i,.mind-eyebrow>i,.mte-eyebrow>i,.mai-eyebrow>i,.aisay-eye>i{display:none!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-wf-page section .wdi-eye,
#wdi-wf-page section .mcl-eye,#wdi-wf-page section .mws-eye,#wdi-wf-page section .mdg-eye,#wdi-wf-page section .msol-eyebrow,
#wdi-wf-page section .mind-eyebrow,#wdi-wf-page section .pr-eyebrow,#wdi-wf-page section .mte-eyebrow,
#wdi-wf-page section .mai-eyebrow,#wdi-wf-page section .ts-eyebrow,#wdi-wf-page section .aisay-eye,
#wdi-wf-page section .wby-eye,#wdi-wf-page section .mrs-eye,#wdi-wf-page section .fq-eyebrow,#wdi-wf-page section .spm-eye,
#wdi-wf-page section .avv-eyebrow,#wdi-wf-page section .lfv-eyebrow,
#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-wf-page section .wdi-eye::before,
#wdi-wf-page section .mcl-eye::before,#wdi-wf-page section .mws-eye::before,#wdi-wf-page section .mdg-eye::before,
#wdi-wf-page section .msol-eyebrow::before,#wdi-wf-page section .mind-eyebrow::before,#wdi-wf-page section .pr-eyebrow::before,
#wdi-wf-page section .mte-eyebrow::before,#wdi-wf-page section .mai-eyebrow::before,#wdi-wf-page section .ts-eyebrow::before,
#wdi-wf-page section .aisay-eye::before,#wdi-wf-page section .wby-eye::before,#wdi-wf-page section .mrs-eye::before,
#wdi-wf-page section .fq-eyebrow::before,#wdi-wf-page section .spm-eye::before,
#wdi-wf-page section .avv-eyebrow::before,#wdi-wf-page section .lfv-eyebrow::before,
#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
   ============================================================ */
.mind{background:#0B0C0E;color:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(48px,5.4vw,80px);overflow:hidden;}
.mind-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start;
  padding-bottom:clamp(40px,4.6vw,72px);}
.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);}
.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);}
.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;}
.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 */
.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);}
.mic-rail::-webkit-scrollbar{display:none;}
.mic-rail:active{cursor:grabbing;}
.mic-track{display:flex;gap:22px;padding:0 var(--gutter);width:max-content;}
/* card */
.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);}
.mic-card:hover{background:#181A1F;border-color:rgba(249,47,100,.34);transform:translateY(-4px);}
.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);}
.mic-card:hover .mic-glow{opacity:1;}
.mic-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.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;}
.mic-ar{flex:none;width:22px;height:22px;color:rgba(255,255,255,.5);
  transition:color .3s ease,transform .35s var(--ease);}
.mic-ar svg{width:100%;height:100%;display:block;}
.mic-card:hover .mic-ar{color:var(--rose-300);transform:translate(3px,-3px);}
.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;}
.mic-card:hover p{color:rgba(255,255,255,.74);}
.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);}
.mic-card:hover .mic-tags,.mic-card:focus-within .mic-tags{opacity:1;transform:none;}
.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;}
.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;}
.mic-card:hover .mic-n{color:var(--rose-300);}
/* nav */
.mic-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:clamp(20px,2.4vw,32px);}
.mic-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.34);}
.mic-btns{display:flex;gap:10px;}
.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);}
.mic-btn svg{width:16px;height:16px;}
.mic-btn:hover{background:var(--rose-500);border-color:var(--rose-500);transform:translateY(-2px);}
.mic-btn:focus-visible{outline:2px solid var(--rose-400);outline-offset:3px;}
@media(hover:none){.mic-tags{opacity:1;transform:none;}}
@media(max-width:940px){
  .mind-top{grid-template-columns:1fr;gap:20px;}
  .mic-card{width:min(84vw,340px);}
}
/* ---- light mode for the industries section ---- */
.mind.is-light{background:#fff;color:var(--ink);}
.mind.is-light .mind-eyebrow{color:var(--rose-600);}
.mind.is-light .mind-eyebrow i{background:var(--rose-500);box-shadow:0 0 0 3px rgba(249,47,100,.16);}
.mind.is-light .mind-h{color:var(--ink);}
.mind.is-light .mind-lead{color:var(--muted);}
.mind.is-light .mind-theme{background:#F4F4F5;border-color:var(--line-2);color:var(--ink-2);}
.mind.is-light .mind-theme:hover{background:#EAEAEE;border-color:var(--line-2);}
.mind.is-light .mic-card{background:#F6F6F7;border-color:var(--line);}
.mind.is-light .mic-card:hover{background:#F1F1F3;border-color:rgba(249,47,100,.34);}
.mind.is-light .mic-card h3{color:var(--ink);}
.mind.is-light .mic-card p{color:var(--muted);}
.mind.is-light .mic-card:hover p{color:var(--ink-2);}
.mind.is-light .mic-ar{color:var(--faint);}
.mind.is-light .mic-card:hover .mic-ar{color:var(--rose-600);}
.mind.is-light .mic-tags span{color:var(--ink-2);border-color:var(--line-2);}
.mind.is-light .mic-n{color:var(--line-2);}
.mind.is-light .mic-card:hover .mic-n{color:var(--rose-600);}
.mind.is-light .mic-glow{background:radial-gradient(circle,rgba(249,47,100,.16),rgba(122,0,255,.09) 46%,transparent 72%);}
.mind.is-light .mic-hint{color:var(--faint);}
.mind.is-light .mic-btn{border-color:var(--line-2);color:var(--ink);}
.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 */
.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);}
.mic-vec svg{width:100%;height:auto;display:block;}
.mic-card:hover .mic-vec{color:rgba(249,47,100,.3);transform:translate(-4px,-4px);}
.mind.is-light .mic-vec{color:rgba(11,12,14,.08);}
.mind.is-light .mic-card:hover .mic-vec{color:rgba(249,47,100,.26);}
.mic-card > *:not(.mic-vec):not(.mic-glow){position:relative;z-index:1;}
/* ============================================================
   11 · INDUSTRIES WE SERVE — horizontal card rail
   ============================================================ */
.mind{background:#0B0C0E;color:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(48px,5.4vw,80px);overflow:hidden;}
.mind-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start;
  padding-bottom:clamp(40px,4.6vw,72px);}
.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);}
.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);}
.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;}
.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 */
.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);}
.mic-rail::-webkit-scrollbar{display:none;}
.mic-rail:active{cursor:grabbing;}
.mic-track{display:flex;gap:22px;padding:0 var(--gutter);width:max-content;}
/* card */
.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);}
.mic-card:hover{background:#181A1F;border-color:rgba(249,47,100,.34);transform:translateY(-4px);}
.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);}
.mic-card:hover .mic-glow{opacity:1;}
.mic-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.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;}
.mic-ar{flex:none;width:22px;height:22px;color:rgba(255,255,255,.5);
  transition:color .3s ease,transform .35s var(--ease);}
.mic-ar svg{width:100%;height:100%;display:block;}
.mic-card:hover .mic-ar{color:var(--rose-300);transform:translate(3px,-3px);}
.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;}
.mic-card:hover p{color:rgba(255,255,255,.74);}
.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);}
.mic-card:hover .mic-tags,.mic-card:focus-within .mic-tags{opacity:1;transform:none;}
.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;}
.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;}
.mic-card:hover .mic-n{color:var(--rose-300);}
/* nav */
.mic-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:clamp(20px,2.4vw,32px);}
.mic-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.34);}
.mic-btns{display:flex;gap:10px;}
.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);}
.mic-btn svg{width:16px;height:16px;}
.mic-btn:hover{background:var(--rose-500);border-color:var(--rose-500);transform:translateY(-2px);}
.mic-btn:focus-visible{outline:2px solid var(--rose-400);outline-offset:3px;}
@media(hover:none){.mic-tags{opacity:1;transform:none;}}
@media(max-width:940px){
  .mind-top{grid-template-columns:1fr;gap:20px;}
  .mic-card{width:min(84vw,340px);}
}
/* ---- light mode for the industries section ---- */
.mind.is-light{background:#fff;color:var(--ink);}
.mind.is-light .mind-eyebrow{color:var(--rose-600);}
.mind.is-light .mind-eyebrow i{background:var(--rose-500);box-shadow:0 0 0 3px rgba(249,47,100,.16);}
.mind.is-light .mind-h{color:var(--ink);}
.mind.is-light .mind-lead{color:var(--muted);}
.mind.is-light .mind-theme{background:#F4F4F5;border-color:var(--line-2);color:var(--ink-2);}
.mind.is-light .mind-theme:hover{background:#EAEAEE;border-color:var(--line-2);}
.mind.is-light .mic-card{background:#F6F6F7;border-color:var(--line);}
.mind.is-light .mic-card:hover{background:#F1F1F3;border-color:rgba(249,47,100,.34);}
.mind.is-light .mic-card h3{color:var(--ink);}
.mind.is-light .mic-card p{color:var(--muted);}
.mind.is-light .mic-card:hover p{color:var(--ink-2);}
.mind.is-light .mic-ar{color:var(--faint);}
.mind.is-light .mic-card:hover .mic-ar{color:var(--rose-600);}
.mind.is-light .mic-tags span{color:var(--ink-2);border-color:var(--line-2);}
.mind.is-light .mic-n{color:var(--line-2);}
.mind.is-light .mic-card:hover .mic-n{color:var(--rose-600);}
.mind.is-light .mic-glow{background:radial-gradient(circle,rgba(249,47,100,.16),rgba(122,0,255,.09) 46%,transparent 72%);}
.mind.is-light .mic-hint{color:var(--faint);}
.mind.is-light .mic-btn{border-color:var(--line-2);color:var(--ink);}
.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 */
.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);}
.mic-vec svg{width:100%;height:auto;display:block;}
.mic-card:hover .mic-vec{color:rgba(249,47,100,.3);transform:translate(-4px,-4px);}
.mind.is-light .mic-vec{color:rgba(11,12,14,.08);}
.mind.is-light .mic-card:hover .mic-vec{color:rgba(249,47,100,.26);}
.mic-card > *:not(.mic-vec):not(.mic-glow){position:relative;z-index:1;}
/* recognition pins; industries rises over it */

.mind ~ section,.mind ~ footer{position:relative;z-index:3;}
@media(max-width:760px){
  .t02-cta-band[data-screen-label="Recognition"]{position:relative;top:auto;}
  .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 */
.mind{position:relative;z-index:3;border-radius:26px 26px 0 0;
  box-shadow:0 -30px 70px rgba(11,12,14,.3);}
.mind ~ section,.mind ~ footer{position:relative;z-index:3;}
@media(max-width:760px){
  .t02-cta-band[data-screen-label="Recognition"]{position:relative!important;top:auto!important;}
  .mind{border-radius:0;box-shadow:none;}
}
/* ---- premium reveal: CTA holds, industries rises from the bottom ---- */
.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);}
.mind ~ section,.mind ~ footer{position:relative;z-index:4;}
@media(max-width:760px){
  .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;}
.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;}
.mind ~ section,.mind ~ footer{position:relative;z-index:5;}
@media(max-width:760px){
  .msol,.t02-cta-band[data-screen-label="Recognition"]{position:relative!important;top:auto!important;bottom:auto!important;}
  .mind{border-radius:0!important;box-shadow:none!important;}
}
.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;}
.mind ~ section,.mind ~ footer{position:relative;z-index:3;}
@media(max-width:760px){.mind{margin-top:0!important;border-radius:0!important;box-shadow:none!important;}}
/* every panel from industries onward rides above and covers it */
.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;}
.mind ~ section,.mind ~ footer{position:relative;z-index:3;background:#fff;}
@media(max-width:760px){
  .cov-stage{position:relative;top:auto;}
  .mind{border-radius:0!important;box-shadow:none!important;}
}
/* industries and everything after it ride over the pinned stage */
.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;}
.mind ~ section,.mind ~ footer,.mind ~ div:not(.wdi-guide){position:relative!important;z-index:6!important;}
@media(max-width:760px){
  .cov-stage{position:relative!important;height:auto!important;overflow:visible!important;}
  .mind{border-radius:0!important;box-shadow:none!important;}
}
.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;}
.mind ~ section,.mind ~ footer,.mind ~ div:not(.wdi-guide){position:relative!important;z-index:6!important;}
@media(max-width:760px){
  .cov-track{padding-bottom:0!important;}
  .mind{margin-top:0!important;border-radius:0!important;box-shadow:none!important;}
}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
.wdi-eye,
.mcl-eye,.mws-eye,.mdg-eye,.msol-eyebrow,.mind-eyebrow,.pr-eyebrow,
.mte-eyebrow,.mai-eyebrow,.ts-eyebrow,.aisay-eye,.wby-eye,.mrs-eye,
.fq-eyebrow,.spm-eye,.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-eye::before,
.mcl-eye::before,.mws-eye::before,.mdg-eye::before,.msol-eyebrow::before,.mind-eyebrow::before,
.pr-eyebrow::before,.mte-eyebrow::before,.mai-eyebrow::before,.ts-eyebrow::before,
.aisay-eye::before,.wby-eye::before,.mrs-eye::before,.fq-eyebrow::before,.spm-eye::before,
.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 */
.mcl-eye>i,.mws-eye>i,.msol-eyebrow>i,.mind-eyebrow>i,.mte-eyebrow>i,.mai-eyebrow>i,.aisay-eye>i{display:none!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-wf-page section .wdi-eye,
#wdi-wf-page section .mcl-eye,#wdi-wf-page section .mws-eye,#wdi-wf-page section .mdg-eye,#wdi-wf-page section .msol-eyebrow,
#wdi-wf-page section .mind-eyebrow,#wdi-wf-page section .pr-eyebrow,#wdi-wf-page section .mte-eyebrow,
#wdi-wf-page section .mai-eyebrow,#wdi-wf-page section .ts-eyebrow,#wdi-wf-page section .aisay-eye,
#wdi-wf-page section .wby-eye,#wdi-wf-page section .mrs-eye,#wdi-wf-page section .fq-eyebrow,#wdi-wf-page section .spm-eye,
#wdi-wf-page section .avv-eyebrow,#wdi-wf-page section .lfv-eyebrow,
#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-wf-page section .wdi-eye::before,
#wdi-wf-page section .mcl-eye::before,#wdi-wf-page section .mws-eye::before,#wdi-wf-page section .mdg-eye::before,
#wdi-wf-page section .msol-eyebrow::before,#wdi-wf-page section .mind-eyebrow::before,#wdi-wf-page section .pr-eyebrow::before,
#wdi-wf-page section .mte-eyebrow::before,#wdi-wf-page section .mai-eyebrow::before,#wdi-wf-page section .ts-eyebrow::before,
#wdi-wf-page section .aisay-eye::before,#wdi-wf-page section .wby-eye::before,#wdi-wf-page section .mrs-eye::before,
#wdi-wf-page section .fq-eyebrow::before,#wdi-wf-page section .spm-eye::before,
#wdi-wf-page section .avv-eyebrow::before,#wdi-wf-page section .lfv-eyebrow::before,
#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;}
.mind{min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:940px),(prefers-reduced-motion:reduce){
  .cov-stage,.mind{min-height:0;display:block;}
  .cvr-lift,.cov-track{transform:none!important;}
}
.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;}
.mind ~ section,.mind ~ footer,.mind ~ div:not(.wdi-guide){position:relative!important;z-index:6!important;}
@media(max-width:940px),(prefers-reduced-motion:reduce){
  .cov-track{padding-bottom:0!important;background:none;}
  .cov-stage{position:relative!important;min-height:0!important;display:block!important;
    transform:none!important;filter:none!important;}
  .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 */
section.mai2{background:#F4F1EC!important;}
/* industries: capability tags always visible, as pink bullet points */
.mic-tags{opacity:1!important;transform:none!important;gap:7px 18px;}
.mic-tags span{border:0!important;border-radius:0!important;padding:0 0 0 14px!important;position:relative;}
.mic-tags span::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--rose-500,#F92F64);}
.mind.is-light .mic-tags span::before{background:var(--rose-600,#E01254);}
/* industry cards: uniform 2-line titles, 4-line body, refined bullet list */
.mic-card .mic-top h3{line-height:1.12;min-height:2.24em;}
.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;}
.mic-tags{display:grid!important;grid-template-columns:1fr 1fr;gap:10px 20px;align-content:start;}
.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;}
.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);}
.mic-card:hover .mic-tags span{color:rgba(255,255,255,.85)!important;}
.mind.is-light .mic-tags span{color:var(--ink-2)!important;}
@media(max-width:940px){.mic-card .mic-top h3{min-height:0;}.mic-card > p{min-height:0;}}
/* industry tags: always exactly one line each */
.mic-tags span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px!important;}
@media(max-width:1280px){.mic-tags span{font-size:11px!important;letter-spacing:0;}}

/* this page: industries is a normal section — no overlap onto the solutions above */
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;}
.mind ~ section,.mind ~ footer,.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){
  #solutions{position:sticky!important;top:var(--msolTop,0px)!important;z-index:1!important;}
  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;}
  .mind ~ section,.mind ~ footer,.mind ~ div:not(.wdi-guide){position:relative!important;z-index:3!important;}
}

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

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

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

.pra-sec{position:relative;z-index:3;}
/* process ramp — matched to the Mobile App Development page */
#process .pra-card:nth-child(1){top:90px; background:#FFFFFF!important;color:var(--ink)!important;border:1px solid var(--line);}
#process .pra-card:nth-child(2){top:120px;background:#FFF0F4!important;color:var(--ink)!important;border:1px solid transparent;}
#process .pra-card:nth-child(3){top:150px;background:#FFD8E3!important;color:var(--ink)!important;}
#process .pra-card:nth-child(4){top:180px;background:#FFA8C0!important;color:var(--ink)!important;}
#process .pra-card:nth-child(5){top:210px;background:#F92F64!important;color:#fff!important;}
#process .pra-card:nth-child(6){top:240px;background:#8A0A2B!important;color:#fff!important;}
#process .pra-card:nth-child(7){top:270px;background:#0B0C0E!important;color:#fff!important;}
#process .pra-card:nth-child(-n+4):hover .pra-toggle{background:rgba(0,0,0,.04);}
#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-eye,
.mcl-eye,.mws-eye,.mdg-eye,.msol-eyebrow,.mind-eyebrow,.pr-eyebrow,
.mte-eyebrow,.mai-eyebrow,.ts-eyebrow,.aisay-eye,.wby-eye,.mrs-eye,
.fq-eyebrow,.spm-eye,.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-eye::before,
.mcl-eye::before,.mws-eye::before,.mdg-eye::before,.msol-eyebrow::before,.mind-eyebrow::before,
.pr-eyebrow::before,.mte-eyebrow::before,.mai-eyebrow::before,.ts-eyebrow::before,
.aisay-eye::before,.wby-eye::before,.mrs-eye::before,.fq-eyebrow::before,.spm-eye::before,
.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-wf-page section .wdi-eye,
#wdi-wf-page section .mcl-eye,#wdi-wf-page section .mws-eye,#wdi-wf-page section .mdg-eye,#wdi-wf-page section .msol-eyebrow,
#wdi-wf-page section .mind-eyebrow,#wdi-wf-page section .pr-eyebrow,#wdi-wf-page section .mte-eyebrow,
#wdi-wf-page section .mai-eyebrow,#wdi-wf-page section .ts-eyebrow,#wdi-wf-page section .aisay-eye,
#wdi-wf-page section .wby-eye,#wdi-wf-page section .mrs-eye,#wdi-wf-page section .fq-eyebrow,#wdi-wf-page section .spm-eye,
#wdi-wf-page section .avv-eyebrow,#wdi-wf-page section .lfv-eyebrow,
#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-wf-page section .wdi-eye::before,
#wdi-wf-page section .mcl-eye::before,#wdi-wf-page section .mws-eye::before,#wdi-wf-page section .mdg-eye::before,
#wdi-wf-page section .msol-eyebrow::before,#wdi-wf-page section .mind-eyebrow::before,#wdi-wf-page section .pr-eyebrow::before,
#wdi-wf-page section .mte-eyebrow::before,#wdi-wf-page section .mai-eyebrow::before,#wdi-wf-page section .ts-eyebrow::before,
#wdi-wf-page section .aisay-eye::before,#wdi-wf-page section .wby-eye::before,#wdi-wf-page section .mrs-eye::before,
#wdi-wf-page section .fq-eyebrow::before,#wdi-wf-page section .spm-eye::before,
#wdi-wf-page section .avv-eyebrow::before,#wdi-wf-page section .lfv-eyebrow::before,
#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-wf-page section .pr-eyebrow,#wdi-wf-page section .fq-eyebrow{color:#F92F64!important;}
/* ============================================================
   Our Process — premium line-mask heading reveal
   ============================================================ */
.pr-h.prx{display:block;}
.pr-h.prx .prx-l{display:block;overflow:hidden;padding-bottom:.06em;}
.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;}
.prx-in .pr-h.prx .prx-l:nth-child(1) i{transition-delay:.06s;}
.prx-in .pr-h.prx .prx-l:nth-child(2) i{transition-delay:.17s;}
.prx-in .pr-h.prx .prx-l:nth-child(3) i{transition-delay:.28s;}
.prx-in .pr-h.prx .prx-l i{transform:none;opacity:1;}
.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;}
.prx-in .prx-p{opacity:1;transform:none;filter:blur(0);transition-delay:.44s;}
.prx-in .prx-p2{transition-delay:.58s;}
.pra-left .pr-eyebrow{opacity:0;transform:translateY(-8px);transition:opacity .7s ease,transform .7s var(--ease);}
.prx-in .pr-eyebrow{opacity:1;transform:none;}
.pra-left .pr-header-cta{opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,.84,.24,1);}
.prx-in .pr-header-cta{opacity:1;transform:none;transition-delay:.72s;}
@media(prefers-reduced-motion:reduce){
  .pr-h.prx .prx-l i,.pra-left .prx-p,.pra-left .pr-eyebrow,.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) */
#ai-process .pra-card{position:sticky;}
#ai-process .pra-card:nth-child(1){top:90px; background:#FFFFFF!important;color:var(--ink)!important;border:1px solid var(--line);z-index:1;}
#ai-process .pra-card:nth-child(2){top:120px;background:#FFF0F4!important;color:var(--ink)!important;border:1px solid transparent;z-index:2;}
#ai-process .pra-card:nth-child(3){top:150px;background:#FFD8E3!important;color:var(--ink)!important;z-index:3;}
#ai-process .pra-card:nth-child(4){top:180px;background:#FFA8C0!important;color:var(--ink)!important;z-index:4;}
#ai-process .pra-card:nth-child(5){top:210px;background:#F92F64!important;color:#fff!important;z-index:5;}
#ai-process .pra-card:nth-child(6){top:240px;background:#8A0A2B!important;color:#fff!important;z-index:6;}
#ai-process .pra-card:nth-child(7){top:270px;background:#0B0C0E!important;color:#fff!important;z-index:7;}
#ai-process .pra-card:nth-child(-n+4):hover .pra-toggle{background:rgba(0,0,0,.04);}
#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
   ============================================================ */
.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);}
.mte ~ section,.mte ~ footer{position:relative;z-index:3;}
.mte-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start;}
.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);}
.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;}
.mte-rule{margin:clamp(38px,4.4vw,64px) 0 0;height:1px;background:rgba(11,12,14,.16);}
.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);}
.mte-cell{display:flex;flex-direction:column;}
.mte-ic{width:44px;height:44px;display:grid;place-items:center;color:var(--ink);
  transition:color .3s ease,transform .4s var(--ease);}
.mte-ic svg{width:100%;height:100%;}
.mte-cell:hover .mte-ic{color:var(--rose-600);transform:translateY(-3px);}
.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;}
.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){.mte-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  .t02-cta-band[data-screen-label="Recognition"]{position:relative;top:auto;}
  .mte{border-radius:0;box-shadow:none;}
  .mte-head{grid-template-columns:1fr;gap:18px;}
  .mte-grid{grid-template-columns:1fr;}
  .mte-cell h3{min-height:0;}
}
/* ---- technology section: match the reveal section's type benchmark ---- */
.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;}
.mte-lead{font-size:clamp(14px,1.1vw,16px)!important;line-height:1.66!important;max-width:52ch;}
.mte-head-r{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(20px,2.2vw,28px);align-self:end;}
.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;}
.mte-cta svg{width:13px;height:13px;}
.mte-cta:hover{border-color:var(--ink);background:var(--ink);color:#fff;gap:14px;}
.mte-cta:focus-visible{outline:2px solid var(--rose-500);outline-offset:3px;}
/* cards: quieter, more professional rhythm */
.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;}
.mte-cell p{font-size:14px!important;line-height:1.68!important;max-width:36ch;}
.mte-ic{width:38px;height:38px;}
@media(max-width:760px){.mte-head-r{align-self:start;}}
/* ---- shared icon tile: the notched shape from the services grid ---- */
.mte-ic,.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);}
.mte-ic svg,.mrs-ic svg{width:24px;height:24px;}
.mte-cell:hover .mte-ic,.mrs-cell:hover .mrs-ic{background:var(--rose-500);color:#fff;transform:none;}
/* technology cards: larger type, matching the services grid */
.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;}
.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) ---- */
.mte{background:#fff!important;}
.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);}
.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 */
.mte-head{align-items:start!important;}
.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;}
.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;}
.mte-rule{background:var(--line)!important;}
/* grid: generous columns, icon → title → paragraph */
.mte-grid{gap:clamp(44px,5vw,80px) clamp(34px,4vw,68px)!important;}
.mte-ic{background:#F4F4F5!important;color:var(--ink)!important;}
.mte-cell:hover .mte-ic{background:var(--rose-500)!important;color:#fff!important;}
.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;}
.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;}
.mte-cta{border-color:var(--line-2)!important;}
/* card headings unified at the 34px ceiling across all three grids */
.mws-card h3,.mdg-cell h3,.mrs-cell h3,.mte-cell h3{
  font-size:clamp(20px,2.2vw,34px)!important;}
/* card body copy: weight 400, consistent size and colour across the grids */
.mdg-cell p,.mrs-cell p,.mte-cell p{font-weight:400!important;font-size:14.5px!important;}
.mte-cell p{color:#71757E!important;}
/* grid items: subtle grey wash on hover, plus the rose circle cursor */
.mws-card,.mdg-cell,.mrs-cell,.mte-cell{transition:background .38s ease,transform .5s var(--ease);}
.mws-card,.mte-cell{border-radius:16px;padding:clamp(20px,2.2vw,28px);margin:calc(-1 * clamp(20px,2.2vw,28px));}
.mte-cell:hover{background:#F4F4F5;}
@media(hover:none){
  .mws-card,.mdg-cell,.mrs-cell,.mte-cell{cursor:auto!important;}
}
.mte{position:relative;z-index:6;background:#fff;}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
.wdi-eye,
.mcl-eye,.mws-eye,.mdg-eye,.msol-eyebrow,.mind-eyebrow,.pr-eyebrow,
.mte-eyebrow,.mai-eyebrow,.ts-eyebrow,.aisay-eye,.wby-eye,.mrs-eye,
.fq-eyebrow,.spm-eye,.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-eye::before,
.mcl-eye::before,.mws-eye::before,.mdg-eye::before,.msol-eyebrow::before,.mind-eyebrow::before,
.pr-eyebrow::before,.mte-eyebrow::before,.mai-eyebrow::before,.ts-eyebrow::before,
.aisay-eye::before,.wby-eye::before,.mrs-eye::before,.fq-eyebrow::before,.spm-eye::before,
.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 */
.mcl-eye>i,.mws-eye>i,.msol-eyebrow>i,.mind-eyebrow>i,.mte-eyebrow>i,.mai-eyebrow>i,.aisay-eye>i{display:none!important;}
/* eyebrow unification — raised specificity to beat madv2-page.css and #work rules */
#wdi-wf-page section .wdi-eye,
#wdi-wf-page section .mcl-eye,#wdi-wf-page section .mws-eye,#wdi-wf-page section .mdg-eye,#wdi-wf-page section .msol-eyebrow,
#wdi-wf-page section .mind-eyebrow,#wdi-wf-page section .pr-eyebrow,#wdi-wf-page section .mte-eyebrow,
#wdi-wf-page section .mai-eyebrow,#wdi-wf-page section .ts-eyebrow,#wdi-wf-page section .aisay-eye,
#wdi-wf-page section .wby-eye,#wdi-wf-page section .mrs-eye,#wdi-wf-page section .fq-eyebrow,#wdi-wf-page section .spm-eye,
#wdi-wf-page section .avv-eyebrow,#wdi-wf-page section .lfv-eyebrow,
#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-wf-page section .wdi-eye::before,
#wdi-wf-page section .mcl-eye::before,#wdi-wf-page section .mws-eye::before,#wdi-wf-page section .mdg-eye::before,
#wdi-wf-page section .msol-eyebrow::before,#wdi-wf-page section .mind-eyebrow::before,#wdi-wf-page section .pr-eyebrow::before,
#wdi-wf-page section .mte-eyebrow::before,#wdi-wf-page section .mai-eyebrow::before,#wdi-wf-page section .ts-eyebrow::before,
#wdi-wf-page section .aisay-eye::before,#wdi-wf-page section .wby-eye::before,#wdi-wf-page section .mrs-eye::before,
#wdi-wf-page section .fq-eyebrow::before,#wdi-wf-page section .spm-eye::before,
#wdi-wf-page section .avv-eyebrow::before,#wdi-wf-page section .lfv-eyebrow::before,
#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)
   ============================================================ */
.mai{background:#0B0C0E;color:#fff;padding:clamp(64px,7.4vw,112px) 0 clamp(56px,6.4vw,96px);}
.mai-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start;}
.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);}
.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);}
.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;}
.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;}
.mai-rule{margin:clamp(38px,4.4vw,64px) 0 clamp(20px,2.2vw,28px);height:1px;background:rgba(255,255,255,.12);}
.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 */
.mai-grid{display:grid;gap:clamp(14px,1.5vw,22px);margin-top:clamp(24px,2.8vw,38px);}
.mai-grid-feat{grid-template-columns:repeat(2,1fr);}
.mai-grid-med{grid-template-columns:repeat(3,1fr);}
.mai-grid-sm{grid-template-columns:repeat(3,1fr);}
/* shared card */
.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;}
.mai-c:hover{transform:translateY(-4px);border-color:rgba(249,47,100,.36);background:#151821;}
.mai-b{padding:clamp(22px,2.4vw,32px);}
.mai-n{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--rose-300);}
.mai-c h3{margin:12px 0 0;font-weight:500;letter-spacing:-0.03em;line-height:1.16;color:#fff;}
.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 */
.mai-media{position:relative;display:block;height:clamp(190px,19vw,280px);overflow:hidden;
  background:linear-gradient(150deg,#1B1E27,#141620 60%,#191320);}
.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;}
.mai-c:hover .mai-media-glow{opacity:.78;}
.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);}
.mai-media-ic svg{width:52%;height:52%;}
.mai-c:hover .mai-media-ic{transform:translate(-50%,-50%) scale(1.06);}
.mai-feat h3{font-size:clamp(21px,2.1vw,30px);}
.mai-feat p{font-size:14.5px;max-width:46ch;}
/* medium + small tiers: notched icon tile inside the card */
.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;}
.mai-ic svg{width:24px;height:24px;}
.mai-c:hover .mai-ic{background:var(--rose-500);color:#fff;}
.mai-med h3{font-size:clamp(18px,1.7vw,24px);}
.mai-sm h3{font-size:clamp(17px,1.5vw,21px);}
.mai-sm p{font-size:13.5px;}
.mai-sm .mai-ic{width:44px;height:44px;}
.mai-sm .mai-ic svg{width:21px;height:21px;}
/* reveal */
.mai-c{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .8s var(--ease),border-color .4s ease,background .4s ease;}
.mai-grid.in .mai-c{opacity:1;transform:none;}
.mai-grid.in .mai-c:nth-child(1){transition-delay:0s;}
.mai-grid.in .mai-c:nth-child(2){transition-delay:.08s;}
.mai-grid.in .mai-c:nth-child(3){transition-delay:.16s;}
@media(prefers-reduced-motion:reduce){.mai-c{opacity:1;transform:none;}}
@media(max-width:1020px){
  .mai-grid-feat,.mai-grid-med,.mai-grid-sm{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:940px){.mai-top{grid-template-columns:1fr;gap:18px;}}
@media(max-width:640px){
  .mai-grid-feat,.mai-grid-med,.mai-grid-sm{grid-template-columns:1fr;}
}
/* AI tiers: always visible; reveal is an enhancement, never a gate */
.mai-c{opacity:1!important;transform:none!important;}
.mai-grid-med,.mai-grid-sm{opacity:1;}
/* lead paragraph baseline-aligns with the headline, not the eyebrow */
.mai-top{align-items:start;}
.mai-lead{padding-top:calc(12px + 1.4em);}
@media(max-width:940px){.mai-lead{padding-top:0;}}
/* ============================================================
   13 · EXPLORE OTHER SERVICES — gradient bento (dark)
   ============================================================ */
.mai{position:sticky;top:0;z-index:1;}
@media(max-width:640px){
  .eos{border-radius:0;box-shadow:none;}
  .mai{position:relative;top:auto;}
  .eos-bento{grid-template-columns:1fr;}
  .eb-ai,.eb-sol{grid-column:span 1;}
  .eb-go{opacity:1;transform:none;}
}
/* DEFECT 2 — drop the unsupported pin claim; sections flow normally */
.mai{position:relative!important;top:auto!important;}
.mai{position:relative;z-index:6;}
/* AI section: dark canvas as on the source page */
.mai{background:#0B0C0E!important;color:#fff!important;}
.mai-eyebrow{color:var(--rose-300)!important;}
.mai-eyebrow i{background:var(--rose-400)!important;box-shadow:0 0 0 3px rgba(249,47,100,.2)!important;}
.mai-h{color:#fff!important;}
.mai-lead{color:rgba(255,255,255,.72)!important;}
.mai-rule{background:rgba(255,255,255,.14)!important;}
.mai-k{color:rgba(255,255,255,.5)!important;}


/* ============================================================
   08 · RELATED SERVICES — 2 × 3 grid, label left / copy right
   ============================================================ */
.mrs{position:relative;background:#fff;padding:clamp(64px,7.4vw,112px) 0;}
.mrs-head{display:grid;grid-template-columns:clamp(180px,20vw,300px) 1fr;
  gap:clamp(24px,4vw,72px);align-items:start;}
.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;}
.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);}
.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 */
.mrs-grid{margin-top:clamp(44px,5.2vw,80px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,1.8vw,26px);}
.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;}
.mrs-cell:nth-child(1),.mrs-cell:nth-child(5){background:#0B0C0E;}
.mrs-cell:hover{transform:translateY(-4px);}
.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;}
.mrs-ic svg{width:22px;height:22px;}
.mrs-cell:nth-child(1) .mrs-ic,.mrs-cell:nth-child(5) .mrs-ic{background:rgba(255,255,255,.1);color:#fff;}
.mrs-cell:hover .mrs-ic{background:var(--rose-500);color:#fff;}
.mrs-n{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  color:var(--faint);}
.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);}
.mrs-cell p{margin-top:12px;font-size:14px;font-weight:300;line-height:1.62;color:var(--muted);
  max-width:34ch;}
.mrs-cell:nth-child(1) h3,.mrs-cell:nth-child(5) h3{color:#fff;}
.mrs-cell:nth-child(1) p,.mrs-cell:nth-child(5) p{color:rgba(255,255,255,.6);}
.mrs-cell:nth-child(1) .mrs-n,.mrs-cell:nth-child(5) .mrs-n{color:rgba(255,255,255,.4);}
@media(max-width:1020px){.mrs-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  .mrs-head{grid-template-columns:1fr;gap:20px;}
  .mrs-grid{grid-template-columns:1fr;}
  .mrs-cell{min-height:0;}
}
/* eyebrow stacks above the headline; copy block sits further left */
.mrs-head{grid-template-columns:1fr!important;gap:clamp(18px,2vw,26px)!important;}
.mrs-head-r{max-width:none;}
.mrs-lead{max-width:64ch;}
/* eyebrow: compact pill, not full width */
.mrs-eye{justify-self:start;width:auto;padding:7px 14px;font-size:10.5px;}
/* hover pill on each related-services card */
.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;}
.mrs-pill svg{width:13px;height:13px;}
.mrs-cell:hover .mrs-pill,.mrs-cell:focus-within .mrs-pill{opacity:1;transform:none;pointer-events:auto;}
.mrs-pill:hover{background:var(--rose-500);gap:13px;}
.mrs-cell:nth-child(1) .mrs-pill,.mrs-cell:nth-child(5) .mrs-pill{background:#fff;color:var(--ink);}
.mrs-cell:nth-child(1) .mrs-pill:hover,.mrs-cell:nth-child(5) .mrs-pill:hover{background:var(--rose-500);color:#fff;}
.mrs-cell:hover .mrs-body{transform:translateY(-46px);}
.mrs-body{transition:transform .42s var(--ease);}
@media(hover:none){
  .mrs-pill{opacity:1;transform:none;pointer-events:auto;position:static;margin-top:18px;}
  .mrs-cell:hover .mrs-body{transform:none;}
}
/* ---- shared icon tile: the notched shape from the services grid ---- */
.mte-ic,.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);}
.mte-ic svg,.mrs-ic svg{width:24px;height:24px;}
.mte-cell:hover .mte-ic,.mrs-cell:hover .mrs-ic{background:var(--rose-500);color:#fff;transform:none;}
/* dark related-service cells keep the white tile */
.mrs-cell:nth-child(1) .mrs-ic,.mrs-cell:nth-child(5) .mrs-ic{background:#fff;color:#0B0C0E;}
.mrs-cell:nth-child(1):hover .mrs-ic,.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 */
.mws-card h3,.mdg-cell h3,.mrs-cell h3,.mte-cell h3{
  font-size:clamp(20px,2.2vw,34px)!important;}
/* card body copy: weight 400, consistent size and colour across the grids */
.mdg-cell p,.mrs-cell p,.mte-cell p{font-weight:400!important;font-size:14.5px!important;}
/* grid items: subtle grey wash on hover, plus the rose circle cursor */
.mws-card,.mdg-cell,.mrs-cell,.mte-cell{transition:background .38s ease,transform .5s var(--ease);}
.mdg-cell:hover,.mrs-cell:hover{background:rgba(11,12,14,.04);}
.mdg-cell:nth-child(1):hover,.mdg-cell:nth-child(6):hover,
.mrs-cell:nth-child(1):hover,.mrs-cell:nth-child(5):hover{background:rgba(255,255,255,.06);}
@media(hover:none){
  .mws-card,.mdg-cell,.mrs-cell,.mte-cell{cursor:auto!important;}
}
.mrs{position:relative;z-index:6;background:#fff;}
.mrs-grid{grid-template-columns:repeat(4,1fr);}
@media(max-width:1020px){.mrs-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.mrs-grid{grid-template-columns:1fr;}}
/* capabilities: pseudo-bento with varied spans, like the support section */
.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;}
.mrs-cell{min-height:0!important;}
.mrs-cell:nth-child(1){grid-column:span 3;}
.mrs-cell:nth-child(2){grid-column:span 3;}
.mrs-cell:nth-child(3){grid-column:span 2;}
.mrs-cell:nth-child(4){grid-column:span 2;}
.mrs-cell:nth-child(5){grid-column:span 2;}
.mrs-cell:nth-child(6){grid-column:span 3;}
.mrs-cell:nth-child(7){grid-column:span 3;}
.mrs-cell:nth-child(1) h3,.mrs-cell:nth-child(2) h3,
.mrs-cell:nth-child(6) h3,.mrs-cell:nth-child(7) h3{font-size:clamp(22px,2.2vw,32px)!important;}
@media(max-width:1020px){
  .mrs-grid{grid-template-columns:repeat(4,1fr)!important;}
  .mrs-cell:nth-child(n){grid-column:span 2;}
}
@media(max-width:760px){
  .mrs-grid{grid-template-columns:1fr!important;}
  .mrs-cell:nth-child(n){grid-column:span 1;}
}
/* dark capability cells keep their ink surface and light type on hover */
.mrs-cell:nth-child(1):hover,.mrs-cell:nth-child(5):hover{background:#12141A!important;}
.mrs-cell:nth-child(1):hover h3,.mrs-cell:nth-child(5):hover h3{color:#fff!important;}
.mrs-cell:nth-child(1):hover p,.mrs-cell:nth-child(5):hover p{color:rgba(255,255,255,.6)!important;}
.mrs-cell:nth-child(1):hover .mrs-n,.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 */
.mrs-cell:hover .mrs-body{transform:none!important;}
.mrs-cell{display:flex;flex-direction:column;}
.mrs-body{margin-top:auto;}
.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;}
.mrs-cell:hover .mrs-pill,.mrs-cell:focus-within .mrs-pill{opacity:1;transform:none;pointer-events:auto;}
@media(hover:none){.mrs-pill{opacity:1;transform:none;pointer-events:auto;}}
/* capability screenshots per direct edits */
.mrs-cell{position:relative;}
.mrs-body{position:relative;}
.mrs-grid{position:relative;}
.mrs-shot{position:absolute;display:block;object-fit:cover;max-width:100%;pointer-events:none;}
.s-c1{width:245px;height:296px;aspect-ratio:3178/3846;left:358px;top:-50px;}
.s-c2{width:371px;height:319px;aspect-ratio:2345/1920;left:263px;top:-91px;}
@media(max-width:1100px){.mrs-shot{display:none;}}
/* team augmentation: face collage fills the empty right side */
.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){.s-c6{display:none;}}
.s-c7{width:308px;height:377px;aspect-ratio:1424/1744;left:383px;top:6px;object-fit:cover;}
@media(max-width:1100px){.s-c7{display:none;}}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
.wdi-eye,
.mcl-eye,.mws-eye,.mdg-eye,.msol-eyebrow,.mind-eyebrow,.pr-eyebrow,
.mte-eyebrow,.mai-eyebrow,.ts-eyebrow,.aisay-eye,.wby-eye,.mrs-eye,
.fq-eyebrow,.spm-eye,.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-eye::before,
.mcl-eye::before,.mws-eye::before,.mdg-eye::before,.msol-eyebrow::before,.mind-eyebrow::before,
.pr-eyebrow::before,.mte-eyebrow::before,.mai-eyebrow::before,.ts-eyebrow::before,
.aisay-eye::before,.wby-eye::before,.mrs-eye::before,.fq-eyebrow::before,.spm-eye::before,
.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-wf-page section .wdi-eye,
#wdi-wf-page section .mcl-eye,#wdi-wf-page section .mws-eye,#wdi-wf-page section .mdg-eye,#wdi-wf-page section .msol-eyebrow,
#wdi-wf-page section .mind-eyebrow,#wdi-wf-page section .pr-eyebrow,#wdi-wf-page section .mte-eyebrow,
#wdi-wf-page section .mai-eyebrow,#wdi-wf-page section .ts-eyebrow,#wdi-wf-page section .aisay-eye,
#wdi-wf-page section .wby-eye,#wdi-wf-page section .mrs-eye,#wdi-wf-page section .fq-eyebrow,#wdi-wf-page section .spm-eye,
#wdi-wf-page section .avv-eyebrow,#wdi-wf-page section .lfv-eyebrow,
#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-wf-page section .wdi-eye::before,
#wdi-wf-page section .mcl-eye::before,#wdi-wf-page section .mws-eye::before,#wdi-wf-page section .mdg-eye::before,
#wdi-wf-page section .msol-eyebrow::before,#wdi-wf-page section .mind-eyebrow::before,#wdi-wf-page section .pr-eyebrow::before,
#wdi-wf-page section .mte-eyebrow::before,#wdi-wf-page section .mai-eyebrow::before,#wdi-wf-page section .ts-eyebrow::before,
#wdi-wf-page section .aisay-eye::before,#wdi-wf-page section .wby-eye::before,#wdi-wf-page section .mrs-eye::before,
#wdi-wf-page section .fq-eyebrow::before,#wdi-wf-page section .spm-eye::before,
#wdi-wf-page section .avv-eyebrow::before,#wdi-wf-page section .lfv-eyebrow::before,
#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
   ============================================================ */
.wby{position:relative;z-index:6;background:#fff;padding:clamp(64px,7.4vw,112px) 0;}
.wby-in{display:grid;grid-template-columns:clamp(280px,30vw,420px) 1fr;
  gap:clamp(28px,4vw,80px);align-items:start;}
.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;}
.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);}
.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;}
.wby-cta svg{width:14px;height:14px;}
.wby-cta:hover{background:var(--rose-500);transform:translateY(-2px);gap:14px;}
.wby-cta:focus-visible{outline:2px solid var(--rose-500);outline-offset:4px;}
/* cards */
.wby-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.5vw,20px);}
.wby-cell{padding:clamp(24px,2.4vw,32px);border-radius:14px;background:#F7F7F8;
  transition:background .35s ease,transform .45s var(--ease);}
.wby-cell:hover{background:#F2F2F4;transform:translateY(-3px);}
.wby-ic{display:grid;place-items:center;width:34px;height:34px;color:var(--ink);
  transition:color .3s ease;}
.wby-ic svg{width:100%;height:100%;}
.wby-cell:hover .wby-ic{color:var(--rose-600);}
.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);}
.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){.wby-in{grid-template-columns:1fr;gap:32px;}}
@media(max-width:620px){.wby-grid{grid-template-columns:1fr;}}
/* why-WDI: card titles up a step; left column centred against the grid */
.wby-cell h3{font-size:21px!important;line-height:1.24!important;}
.wby-l{align-self:center;}
/* why-WDI cards: adopt the support-section bento palette */
.wby-cell:nth-child(1){background:linear-gradient(160deg,#F2F2F4,#E9EAEE)!important;}
.wby-cell:nth-child(2){background:linear-gradient(160deg,#F4EEFF,#EDE4FF)!important;}
.wby-cell:nth-child(3){background:linear-gradient(160deg,#FFEFF4,#FFE3EC)!important;}
.wby-cell:nth-child(4){background:linear-gradient(160deg,#EAF6F1,#DFF1E9)!important;}
.wby-cell:nth-child(5){background:linear-gradient(160deg,#EFF3FA,#E4EBF7)!important;}
.wby-cell:nth-child(6){background:linear-gradient(160deg,#F5F3EE,#EDE9E1)!important;}
.wby-cell{border-radius:20px!important;}
.wby-cell:hover{filter:brightness(.985);transform:translateY(-3px);}
/* ============================================================
   EYEBROWS — one consistent treatment across every section
   ============================================================ */
.wdi-eye,
.mcl-eye,.mws-eye,.mdg-eye,.msol-eyebrow,.mind-eyebrow,.pr-eyebrow,
.mte-eyebrow,.mai-eyebrow,.ts-eyebrow,.aisay-eye,.wby-eye,.mrs-eye,
.fq-eyebrow,.spm-eye,.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-eye::before,
.mcl-eye::before,.mws-eye::before,.mdg-eye::before,.msol-eyebrow::before,.mind-eyebrow::before,
.pr-eyebrow::before,.mte-eyebrow::before,.mai-eyebrow::before,.ts-eyebrow::before,
.aisay-eye::before,.wby-eye::before,.mrs-eye::before,.fq-eyebrow::before,.spm-eye::before,
.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-wf-page section .wdi-eye,
#wdi-wf-page section .mcl-eye,#wdi-wf-page section .mws-eye,#wdi-wf-page section .mdg-eye,#wdi-wf-page section .msol-eyebrow,
#wdi-wf-page section .mind-eyebrow,#wdi-wf-page section .pr-eyebrow,#wdi-wf-page section .mte-eyebrow,
#wdi-wf-page section .mai-eyebrow,#wdi-wf-page section .ts-eyebrow,#wdi-wf-page section .aisay-eye,
#wdi-wf-page section .wby-eye,#wdi-wf-page section .mrs-eye,#wdi-wf-page section .fq-eyebrow,#wdi-wf-page section .spm-eye,
#wdi-wf-page section .avv-eyebrow,#wdi-wf-page section .lfv-eyebrow,
#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-wf-page section .wdi-eye::before,
#wdi-wf-page section .mcl-eye::before,#wdi-wf-page section .mws-eye::before,#wdi-wf-page section .mdg-eye::before,
#wdi-wf-page section .msol-eyebrow::before,#wdi-wf-page section .mind-eyebrow::before,#wdi-wf-page section .pr-eyebrow::before,
#wdi-wf-page section .mte-eyebrow::before,#wdi-wf-page section .mai-eyebrow::before,#wdi-wf-page section .ts-eyebrow::before,
#wdi-wf-page section .aisay-eye::before,#wdi-wf-page section .wby-eye::before,#wdi-wf-page section .mrs-eye::before,
#wdi-wf-page section .fq-eyebrow::before,#wdi-wf-page section .spm-eye::before,
#wdi-wf-page section .avv-eyebrow::before,#wdi-wf-page section .lfv-eyebrow::before,
#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 */
.wby-cell.wby-rise{opacity:0;transform:translateX(46px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
.wby-cell.wby-rise.in{opacity:1;transform:none;}
#why-wdi .wby-cell,#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-wf-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;
}



:where(#wdi-wf-page) a{color:inherit;text-decoration:none;}
:where(#wdi-wf-page) img{display:block;max-width:100%;}

/* ---------- gallery shell ---------- */
.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;}
.hbv-tag b{color:#fff;font-weight:600;}
.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;}
.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;}
.hbv-end{text-align:center;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.4);padding:40px;}

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

/* ---------- shared nav ---------- */
.hbnav{position:relative;z-index:5;}
.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;}
.hbnav-brand{display:inline-flex;align-items:center;gap:10px;}
.hbnav-mark{width:28px;height:28px;display:block;}
.hbnav-name{font-size:17px;font-weight:700;letter-spacing:-0.02em;line-height:1;}
.hbnav-links{display:flex;align-items:center;gap:28px;}
.hbnav-links a{font-size:14.5px;font-weight:500;letter-spacing:-0.01em;opacity:.82;transition:opacity .25s;}
.hbnav-links a:hover{opacity:1;}
.hbnav-cta{display:flex;align-items:center;gap:11px;}
@media(max-width:860px){.hbnav-links{display:none;}}

/* buttons */
.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;}
.hbtn svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.hbtn:hover svg{transform:translateX(3px);}
.hbtn-rose{background:var(--rose-500);color:#fff;box-shadow:0 14px 30px rgba(228,18,82,.28);}
.hbtn-rose:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(228,18,82,.4);}
.hbtn-ink{background:var(--ink);color:#fff;}
.hbtn-ink:hover{background:var(--rose-500);transform:translateY(-2px);box-shadow:0 16px 34px rgba(228,18,82,.32);}
.hbtn-lightline{background:#fff;color:var(--ink);border-color:var(--line-2);}
.hbtn-lightline:hover{border-color:var(--ink);transform:translateY(-2px);}
.hbtn-ghost-d{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}
.hbtn-ghost-d:hover{border-color:var(--rose-400);color:var(--rose-300);transform:translateY(-2px);}
.hbtn-white{background:#fff;color:var(--ink);}
.hbtn-white:hover{background:var(--rose-500);color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px rgba(228,18,82,.34);}
.hbtn-lg{font-size:16px;padding:16px 30px;}
.hbtn-txt{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-0.01em;}

/* shared eyebrow */
.hb-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;}
.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);}
.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 */
.hb-rise{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);}
.hb.in .hb-rise{opacity:1;transform:none;}
.hb.in .hb-rise.d1{transition-delay:.08s;}
.hb.in .hb-rise.d2{transition-delay:.16s;}
.hb.in .hb-rise.d3{transition-delay:.24s;}
.hb.in .hb-rise.d4{transition-delay:.32s;}
.hb.in .hb-rise.d5{transition-delay:.40s;}
@media(prefers-reduced-motion:reduce){.hb-rise{opacity:1;transform:none;}}

/* ============================================================
   1 · IDEA → PRODUCT · Stripe-style (gradient swoosh + logo strip)
   ============================================================ */
.hb1{background:#fff;color:var(--ink);}
.hb1 .hbnav-name{color:var(--ink);}
.hb1-swoosh{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.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);}
.hb1-swoosh::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,.4) 48%,transparent 62%);}
.hb1-in{max-width:600px;padding-top:clamp(30px,4vw,54px);}
.hb1-micro{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:-0.01em;margin-bottom:22px;}
.hb1-micro b{font-weight:700;font-feature-settings:"tnum" 1;}
.hb1-micro .s{color:var(--rose-600);}
.hb1-h{font-size:clamp(34px,4.6vw,60px);font-weight:600;letter-spacing:-0.035em;line-height:1.04;}
.hb1-h .mut{color:#5A6672;}
.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;}
.hb1-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;}
.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);}
.hb1-logos-track{display:flex;align-items:center;gap:60px;width:max-content;animation:hbMarquee 34s linear infinite;}
.hb1-logos:hover .hb1-logos-track{animation-play-state:paused;}
@keyframes hbMarquee{to{transform:translateX(-50%);}}
.hb1-logo{flex:none;font-size:21px;font-weight:700;letter-spacing:-0.02em;color:#9199A3;white-space:nowrap;transition:color .3s;}
.hb1-logo:hover{color:var(--ink);}

/* ============================================================
   2 · MOBILE APP DEVELOPMENT · Acctual-style (centered + phone mockups)
   ============================================================ */
.hb2{background:var(--bg-2);color:var(--ink);}
.hb2 .hbnav-name{color:var(--ink);}
.hb2-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.hb2-deco span{position:absolute;border-radius:30%;filter:blur(2px);opacity:.5;}
.hb2 .hb-body{text-align:center;padding-bottom:0;}
.hb2-badge{background:rgba(122,0,255,.08);color:var(--violet);border:1px solid rgba(122,0,255,.16);}
.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;}
.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;}
.hb2-cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hb2-chips{margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.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;}
.hb2-chip i{width:6px;height:6px;border-radius:50%;background:var(--rose-500);}
.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);}
.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);}
.hb2-phone.mid{transform:translateY(0) scale(1.06);z-index:2;}
.hb2-phone.l{transform:translateY(56px) rotate(-6deg);}
.hb2-phone.r{transform:translateY(56px) rotate(6deg);}
.hb2-screen{width:100%;height:100%;border-radius:22px;overflow:hidden;position:relative;
  background:linear-gradient(170deg,#fff,#F4F5F7);}
.hb2-screen .bar{height:26px;display:flex;align-items:center;justify-content:center;}
.hb2-screen .bar::before{content:"";width:42px;height:6px;border-radius:6px;background:#0B0C0E;opacity:.85;}
.hb2-screen .hd{margin:6px 12px 0;height:60px;border-radius:12px;background:linear-gradient(120deg,var(--rose-500),var(--violet));}
.hb2-screen .rows{padding:10px 12px;display:flex;flex-direction:column;gap:7px;}
.hb2-screen .rows i{height:12px;border-radius:5px;background:#E7E9ED;}
.hb2-screen .rows i:nth-child(2){width:80%;}
.hb2-screen .rows i:nth-child(3){width:64%;}
.hb2-screen.alt .hd{background:linear-gradient(120deg,#2A6FDB,#7A00FF);}
.hb2-screen.alt2 .hd{background:linear-gradient(120deg,#1F8A5B,#2A6FDB);}

/* ============================================================
   3 · DIGITAL PRODUCT DEVELOPMENT · Apple keynote (centered + device)
   ============================================================ */
.hb3{background:linear-gradient(180deg,#fff,#F3F4F7);color:var(--ink);text-align:center;}
.hb3 .hbnav-name{color:var(--ink);}
.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%);}
.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;}
.hb3-h .grad{background:linear-gradient(110deg,var(--rose-500),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
.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;}
.hb3-cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;}
.hb3-stage{position:relative;z-index:3;margin-top:clamp(46px,5vw,72px);}
.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);}
.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);}
.hb3-browser .top i{width:11px;height:11px;border-radius:50%;background:var(--line-2);}
.hb3-browser .top i:nth-child(1){background:#FF5F57;}
.hb3-browser .top i:nth-child(2){background:#FEBC2E;}
.hb3-browser .top i:nth-child(3){background:#28C840;}
.hb3-browser .top .url{margin-left:12px;height:22px;flex:1;max-width:280px;border-radius:6px;background:#fff;border:1px solid var(--line);}
.hb3-dash{display:grid;grid-template-columns:180px 1fr;min-height:230px;}
.hb3-dash .side{background:var(--bg-2);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:10px;}
.hb3-dash .side i{height:11px;border-radius:5px;background:#E7E9ED;}
.hb3-dash .side i:first-child{background:linear-gradient(90deg,var(--rose-500),var(--violet));width:70%;}
.hb3-dash .main{padding:20px;display:flex;flex-direction:column;gap:14px;text-align:left;}
.hb3-dash .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.hb3-dash .cards div{height:64px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);}
.hb3-dash .cards div:first-child{background:linear-gradient(150deg,rgba(249,47,100,.12),rgba(122,0,255,.1));border-color:transparent;}
.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;}
.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)
   ============================================================ */
.hb4{background:#08090B;color:#fff;text-align:center;}
.hb4 .hbnav-name{color:#fff;}
.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%);}
.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);}}
.hb4 .hb-eyebrow{color:var(--rose-300);}
.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;}
.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;}
.hb4-cta{margin-top:34px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
.hb4-stats{margin-top:clamp(44px,5vw,66px);display:flex;justify-content:center;gap:clamp(28px,5vw,72px);flex-wrap:wrap;}
.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;}
.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)
   ============================================================ */
.hb5{background:#fff;color:var(--ink);text-align:center;}
.hb5 .hbnav-name{color:var(--ink);}
.hb5-blobs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.hb5-blobs span{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(70px);opacity:.5;}
.hb5-blobs .a{top:-8%;left:6%;background:radial-gradient(circle,#FF8A3D,transparent 68%);}
.hb5-blobs .b{top:-4%;right:8%;background:radial-gradient(circle,#2A6FDB,transparent 68%);}
.hb5-blobs .c{bottom:-16%;left:36%;background:radial-gradient(circle,#F92F64,transparent 68%);}
.hb5-pill{background:#F3F4F6;color:var(--ink-2);border:1px solid var(--line);}
.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;}
.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%;}}
.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;}
.hb5-cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hb5-orbit{margin-top:clamp(40px,5vw,60px);display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.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)
   ============================================================ */
.hb6{background:#fff;color:var(--ink);text-align:center;}
.hb6 .hbnav-name{color:var(--ink);}
.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);}
.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;}
.hb6-sub{margin:22px auto 0;font-size:clamp(15px,1.4vw,18px);font-weight:400;color:var(--ink-2);max-width:44ch;}
.hb6-cta{margin-top:26px;display:flex;justify-content:center;}
/* looping video conveyor — the WDI way (6 steps) */
.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);}
.hb6-marq-track{display:flex;gap:18px;width:max-content;animation:hb6move 42s linear infinite;}
.hb6-marq:hover .hb6-marq-track{animation-play-state:paused;}
@keyframes hb6move{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.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);}
.hb6-mcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hb6-mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,14,.12) 30%,rgba(11,12,14,.78));}
.hb6-mcard-lbl{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;text-align:left;color:#fff;}
.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;}
.hb6-mcard-n::before{content:"";width:22px;height:1.5px;background:var(--rose-400);}
.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){.hb6-marq-track{animation:none;flex-wrap:wrap;justify-content:center;}}
@media(max-width:760px){.hb6-mcard{width:78vw;}}

/* ============================================================
   7 · DIGITAL PRODUCT DEV (alt) · Orchid-style (editorial serif + ambient)
   ============================================================ */
.hb7{background:#F7F7F8;color:var(--ink);}
.hb7 .hbnav-name{color:var(--ink);}
.hb7-amb{position:absolute;top:0;right:0;width:58%;height:100%;z-index:1;pointer-events:none;overflow:hidden;}
.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;}
.hb7-amb::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F7F7F8 8%,rgba(247,247,248,.3) 40%,transparent 66%);}
.hb7 .hb-body{max-width:none;}
.hb7-in{max-width:600px;}
.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);}
.hb7-h em{font-style:italic;color:var(--rose-600);}
.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;}
.hb7-cta{margin-top:30px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;}

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

#wdi-wf-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) ===== */
.hb3{position:relative;width:100%;min-height:100svh;background:#0B0C0E;overflow:hidden;isolation:isolate;font-family:var(--font);display:flex;flex-direction:column;}
.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%);}
.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;}}
.hb3-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;}
.hb3-nav{position:relative;z-index:20;}
.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);}
.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;}
.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;}
.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;}
.hb3-tag i{width:7px;height:7px;border-radius:50%;background:var(--rose-500);box-shadow:0 0 12px rgba(249,47,100,.8);}
.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;}
.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;}
.hb3-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.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;}
.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;}
.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;}
.hb3-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.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;}
.hb3-arrow svg{width:20px;height:20px;transition:transform .25s;}
.hb3-arrow:hover{transform:translateY(-2px);background:var(--rose-600);box-shadow:0 16px 34px rgba(249,47,100,.4);}
.hb3-arrow:hover svg{transform:translateX(3px);}
.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){.hb3-top,.hb3-h,.hb3-sub,.hb3-cta,.hb3-meta{animation:none;opacity:1;transform:none;}.hb3-rule{animation:none;transform:none;}}
/* ============================================================
   V10-V13 — reference-matched hero variants (WDI palette)
   ============================================================ */
#wdi-wf-page{--ink:#0B0C0E;--ink-2:#41454C;--muted:#717680;--line:#ECEDF0;--line-2:#E3E4E8;--cream:#F5F4EF;}
/* ============================================================
   Industries — compact vector-card rail
   ============================================================ */
.ais-ind{position:relative;padding:clamp(56px,6vw,92px) 0;background:#fff;}
.ais-ind-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:clamp(28px,3.2vw,42px);}
.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;}
.ais-ind-h .amp{background:linear-gradient(110deg,var(--rose-600),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.ais-ind-nav{display:flex;gap:10px;flex:none;}
.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;}
.ais-ind-arrow svg{width:17px;height:17px;}
.ais-ind-arrow:hover{background:var(--rose-500);border-color:var(--rose-500);color:#fff;transform:translateY(-2px);}
.ais-ind-arrow:disabled{opacity:.32;cursor:default;transform:none;background:#fff;border-color:var(--line);color:var(--ink);}
/* rail */
.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;}
.ais-ind-rail::-webkit-scrollbar{display:none;}
.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;}
.ais-ind-card:hover{transform:translateY(-5px);border-color:var(--line-2);
  box-shadow:0 24px 52px -34px rgba(11,12,14,.34);}
.ais-ind-art{display:block;border-radius:14px;overflow:hidden;aspect-ratio:14/11;}
.ais-ind-art svg{width:100%;height:100%;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.ais-ind-card:hover .ais-ind-art svg{transform:scale(1.05);}
.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);}
.ais-ind-d{display:block;margin-top:9px;padding:0 4px;font-size:14px;font-weight:300;line-height:1.55;
  color:var(--muted);}
.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;}
.ais-ind-more svg{width:14px;height:14px;}
.ais-ind-card:hover .ais-ind-more{gap:12px;}
@media(max-width:760px){
  .ais-ind-head{flex-direction:column;align-items:flex-start;gap:20px;}
  .ais-ind-card{flex-basis:80vw;}
}
@media(prefers-reduced-motion:reduce){.ais-ind-card,.ais-ind-art svg{transition:none;}}
/* open-source glyph art, centred in its tinted panel */
.ais-ind-art{display:grid;place-items:center;}
.ais-ind-art img{width:42%;max-width:88px;height:auto;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.ais-ind-card:hover .ais-ind-art img{transform:scale(1.08);}
/* tighten the gap between the portfolio and industries */
.ais-ind{padding-top:clamp(28px,3vw,44px);}
/* abstract compositions fill the panel */
.ais-ind-art{display:block;}
.ais-ind-art svg{width:100%;height:100%;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.ais-ind-card:hover .ais-ind-art svg{transform:scale(1.04);}
/* industry card headers: larger, better separated */
.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);}
.ais-ind-d{margin-top:11px;font-size:14.5px;line-height:1.6;}
#wdi-wf-page{
  --font:var(--font-figtree),system-ui,-apple-system,sans-serif;
  --ink:#0B0C0E;
  --bg:#FFFFFF;
  --bg-2:#FBFBFC;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
}
:where(#wdi-wf-page) button,
:where(#wdi-wf-page) input,
:where(#wdi-wf-page) textarea,
:where(#wdi-wf-page) select{
  font-family:var(--font);
  color:inherit;
}

/* Final CTA: left-align (overrides centred .pp-cta defaults). */
#wdi-wf-page .mad-final .pp-cta{
  display:block!important;
  place-items:unset!important;
  text-align:left!important;
  width:auto!important;
  max-width:none!important;
  left:auto!important;
  transform:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  position:static!important;
  overflow:visible!important;
}
#wdi-wf-page .mad-final .pp-cta-in{
  text-align:left!important;
  margin:0!important;
  margin-inline:0!important;
  max-width:none!important;
  width:100%!important;
  padding:0!important;
}
#wdi-wf-page .mad-final .pp-cta-h,
#wdi-wf-page .mad-final .pp-cta-p{
  text-align:left!important;
  margin-left:0!important;
  margin-right:0!important;
  margin-inline:0!important;
}
#wdi-wf-page .mad-final .pp-cta-p{margin-top:24px!important;}
#wdi-wf-page .mad-final .pp-cta-actions{
  justify-content:flex-start!important;
}

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