/* ==========================================================================
   Precision & Poise — Local Redesign Layer (experiments/redesign-preview)
   Preserves all production tokens, Archivo variable typography, WebGL shaders,
   and product evidence while elevating hierarchy, spatial rhythm, and delight.
   ========================================================================== */

body.redesign-v3 {
  --rd-cobalt: #3454ed;
  --rd-indigo: #293da7;
  --rd-emerald: #188653;
  --rd-surface-glass: rgba(251, 251, 248, 0.78);
  --rd-surface-card: #fbfbf8;
  --rd-border-crisp: rgba(25, 27, 28, 0.11);
  --rd-border-highlight: rgba(255, 255, 255, 0.72);
  --rd-shadow-elevated: 0 22px 54px -16px rgba(20, 23, 28, 0.12), 0 4px 14px -4px rgba(20, 23, 28, 0.06);
  --rd-shadow-card: 0 12px 32px -10px rgba(20, 23, 28, 0.08), 0 2px 6px -1px rgba(20, 23, 28, 0.04);
}
body.redesign-v3 .lab-picker {
  display: none !important;
}

/* ---------- 1. Floating Glassmorphic Navigation ---------- */
/* Fixed overlay pill so it never consumes document flow or shifts layout */
body.redesign-v3 .v-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 45;
  min-height: 60px;
  height: auto;
  margin: 0;
  width: min(1380px, calc(100% - 48px));
  padding: 8px 12px 8px 26px;
  border-radius: 999px;
  border: 1px solid var(--rd-border-crisp);
  background: var(--rd-surface-glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 30px -10px rgba(25, 27, 28, 0.08), inset 0 1px 0 var(--rd-border-highlight);
  transform: translate3d(-50%, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s ease, box-shadow 0.35s var(--v-ease), background-color 0.35s ease;
}

body.redesign-v3 .v-nav.is-scrolling-hidden:not(:focus-within) {
  transform: translate3d(-50%, calc(-100% - 28px), 0);
  opacity: 0;
  pointer-events: none;
}

body.redesign-v3 .v-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  min-height: 44px;
  line-height: 1;
}

body.redesign-v3 .v-brand strong {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--v-ink);
}

body.redesign-v3 .v-nav nav {
  gap: 26px;
}

.rd-menu-toggle {
  display: none;
}

.rd-menu-toggle .icon {
  width: 22px;
  height: 22px;
}

.rd-menu-toggle,
.rd-menu-close {
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--v-ink);
  cursor: pointer;
}

.rd-menu-toggle:hover,
.rd-menu-close:hover {
  background: var(--s-l2);
  color: var(--v-blue);
}

dialog.rd-mobile-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--v-ink);
}

dialog.rd-mobile-menu::backdrop {
  background: rgba(25, 27, 28, 0.38);
  opacity: 0;
  transition: opacity 320ms ease;
}

dialog.rd-mobile-menu.is-open::backdrop {
  opacity: 1;
}

.rd-menu-panel {
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100% - 40px));
  height: 100%;
  padding: max(20px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  background: var(--s-l1, var(--v-paper));
  border-right: 1px solid var(--s-stroke);
  box-shadow: 12px 0 40px rgba(25, 27, 28, 0.12);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
}

.rd-mobile-menu.is-open .rd-menu-panel {
  transform: translateX(0);
}

.rd-menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rd-menu-heading strong {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.03em;
}

.rd-menu-close {
  display: inline-flex;
  margin-right: -10px;
}

.rd-menu-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 40px;
}

.rd-menu-links a {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 10px 0;
  font-size: 26px;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.rd-menu-links a:hover {
  color: var(--v-blue);
}

.rd-menu-links .rd-menu-contact {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--s-stroke);
  color: var(--v-blue);
}

html.rd-menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .rd-menu-panel,
  dialog.rd-mobile-menu::backdrop {
    transition: none;
  }
}

/* ---------- 2. Hero Architecture & Telemetry Strip ---------- */
.study-on body.redesign-v3 main > .v-hero {
  position: relative;
  width: 92.5%;
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(96px, 9.5vw, 136px) clamp(24px, 3.8vw, 64px) clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: min(860px, 100svh);
}

body.redesign-v3 .v-hero .hero-copy {
  width: 100%;
}

/* Full-bleed hero: the panel spans the viewport so the Terrain scene can run
   off the right edge, while the copy keeps the original content column. */
@media (min-width: 701px) {
  .study-on body.redesign-v3 main > .v-hero {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
    border-inline: 0;
    padding-inline: calc(max(3.75%, (100% - 1440px) / 2) + clamp(24px, 3.8vw, 64px));
  }
  body.redesign-v3 .v-hero .colour-wave {
    left: 0;
    right: 0;
    width: auto;
  }
  /* Left side stays a faint ghost behind the title; full strength from ~62%;
     the right side bleeds off-screen. */
  body.redesign-v3.motion-lab .colour-wave canvas {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0.22) 40%, #000 64%, #000 100%), linear-gradient(transparent, #000 12%, #000 84%, transparent);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0.22) 40%, #000 64%, #000 100%), linear-gradient(transparent, #000 12%, #000 84%, transparent);
  }
}

.rd-hero-ctas button {
  pointer-events: auto;
}

.rd-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(24px, 3vw, 38px);
}

.rd-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--v-muted);
  box-shadow: none;
}

.rd-dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rd-emerald);
  box-shadow: 0 0 0 4px rgba(24, 134, 83, 0.16);
}

.rd-eyebrow-coord {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-muted);
}

.study-on body.redesign-v3 .v-hero h1 {
  font-size: clamp(32px, 4.6vw, 72px);
  line-height: 1.1648;
  letter-spacing: -0.046em;
  font-weight: 600;
  max-width: 24ch;
}

.rd-h1-top {
  display: block;
  color: var(--v-ink);
}

.rd-h1-accent {
  display: block;
  margin-top: 0.04em;
  padding-bottom: 0.08em;
}

.rd-hero-intro {
  margin-top: clamp(28px, 3.2vw, 44px);
  width: 100% !important;
  max-width: none !important;
}

.rd-hero-intro > p {
  font-size: clamp(17px, 1.35vw, 20.5px) !important;
  line-height: 1.56 !important;
  color: #383c42 !important;
  max-width: 52ch !important;
}

.rd-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
  width: 100%;
}

.rd-hero-cta-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.rd-hero-ctas .action {
  margin-top: 0 !important;
  gap: 12px;
  box-shadow: 0 12px 28px -8px rgba(50, 77, 205, 0.48);
}

.rd-hero-ctas .action .icon {
  width: 20px;
  height: 20px;
}

.rd-hero-ctas .motion-toggle {
  position: static !important;
  margin-left: auto;
  padding: 8px 4px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  font-size: 13px;
  color: var(--v-muted);
  pointer-events: auto;
}

.rd-hero-ctas .motion-toggle:hover {
  background: transparent !important;
  color: var(--rd-cobalt);
}

.rd-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(25, 27, 28, 0.16);
  background: rgba(251, 251, 248, 0.68);
  backdrop-filter: blur(8px);
  font-size: 14.5px;
  font-weight: 520;
  color: var(--v-ink);
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--v-ease);
}

.rd-secondary-cta .icon {
  width: 20px;
  height: 20px;
  transition: transform 0.25s var(--v-ease);
}

.rd-secondary-cta:hover {
  border-color: var(--rd-cobalt);
  background: #ffffff;
  color: var(--rd-cobalt);
  transform: translateY(-1px);
}

.rd-secondary-cta:hover .icon {
  transform: translateY(2px);
}

/* Hero Footer: Telemetry */
.rd-hero-footer {
  position: relative;
  z-index: 3;
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid rgba(25, 27, 28, 0.12);
  display: block;
}

.rd-telemetry {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
}

.rd-tel-item dt {
  font-size: clamp(12px, 1.05vw, 13px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-cobalt);
  margin-bottom: 0;
  line-height: 1.4;
}

.rd-tel-item dd {
  margin: 0;
}

.rd-tel-item dd strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v-ink);
}

.rd-tel-item dd span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--v-muted);
}

.rd-scene-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.rd-scene-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-muted);
}

.rd-scene-pills {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(25, 27, 28, 0.12);
  background: rgba(251, 251, 248, 0.8);
  backdrop-filter: blur(10px);
  gap: 3px;
}

.rd-scene-pills button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--v-muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 520;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.rd-scene-pills button span {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

.rd-scene-pills button:hover {
  color: var(--v-ink);
}

.rd-scene-pills button[aria-pressed="true"] {
  background: var(--v-ink);
  color: #fbfbf8;
  box-shadow: 0 2px 8px rgba(25, 27, 28, 0.18);
}

/* ---------- 2b. Full-Width Edge-to-Edge Panels (No Rounded Corners, Minimal Spacing) ---------- */
.study-on body.redesign-v3 main > :is(section, article):not(.v-hero):not(.contact-finale) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  margin-bottom: var(--s-gap, 12px) !important;
  border-radius: 0 !important;
  border-inline: 0;
  padding-inline: max(var(--s-pad-x), calc((100% - 1440px) / 2));
}

@media (min-width: 1200px) and (hover: hover) {
  .study-on body.redesign-v3 main > :is(.feature-cisty, .partner-feature, .insurance-feature, .hifive-chapter) {
    padding-inline: max(
      calc(var(--s-pad-x) + var(--rail-lane) - 24px),
      calc((100% - 1320px) / 2)
    );
  }
}

.study-on body.redesign-v3 #contact .finale-stage {
  --finale-sx: 1;
}

.study-on body.redesign-v3 #contact .finale-surface {
  border-radius: 0;
  border-inline: 0;
}

/* ---------- 3. Selected Work (#work) — Bento Dossier & Architectural Index ---------- */
body.redesign-v3 #work.work-opening {
  --panel: #f4f4ee;
}

body.redesign-v3 #work .wo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--s-stroke);
}

.rd-work-switcher {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--s-stroke);
  background: rgba(255, 255, 255, 0.65);
  gap: 3px;
}

.rd-work-switcher button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 520;
  color: var(--v-muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.rd-work-switcher button[aria-pressed="true"] {
  background: var(--v-ink);
  color: #fbfbf8;
}

body.redesign-v3 #work .wo-title {
  margin-top: clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 40px;
}

.rd-section-sub {
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 420;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--v-muted);
  max-width: 38ch;
}

/* Bento Dossier Grid (Default) */
body.redesign-v3 #work[data-work-layout="bento"] .wi-table-head {
  display: none !important;
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-index {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  border: 0;
}

@media (min-width: 1051px) {
  /* Staggered 2-column cascade on a tenth-of-a-card grid (each card spans 10 rows).
     All cards share one height (the tallest card, measured in redesign.js).
     The right column starts 30% of a card lower, and cards in the same column
     are separated by 30% of a card's height. */
  body.redesign-v3 #work[data-work-layout="bento"] .wi-index {
    grid-template-rows: repeat(26, calc(var(--rd-card-h) / 10));
    column-gap: clamp(24px, 2.4vw, 36px);
    row-gap: 0;
    align-items: start;
  }
  body.redesign-v3 #work[data-work-layout="bento"] .wi-index > li {
    align-self: start;
    height: var(--rd-card-h, auto);
  }
  body.redesign-v3 #work[data-work-layout="bento"] .wi-index > li:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 10;
  }
  body.redesign-v3 #work[data-work-layout="bento"] .wi-index > li:nth-child(2) {
    grid-column: 2;
    grid-row: 4 / span 10;
  }
  body.redesign-v3 #work[data-work-layout="bento"] .wi-index > li:nth-child(3) {
    grid-column: 1;
    grid-row: 14 / span 10;
  }
  body.redesign-v3 #work[data-work-layout="bento"] .wi-index > li:nth-child(4) {
    grid-column: 2;
    grid-row: 17 / span 10;
  }
}

/* Cards show only image, title, summary and the footer links. */
body.redesign-v3 #work[data-work-layout="bento"] .wi-focus,
body.redesign-v3 #work[data-work-layout="bento"] .wi-status {
  display: none !important;
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-index > li {
  border: 1px solid rgba(25, 27, 28, 0.1);
  border-radius: 22px;
  background: #fbfbf8;
  box-shadow: var(--rd-shadow-card), inset 0 1px 0 #ffffff;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s var(--v-ease), box-shadow 0.4s var(--v-ease), border-color 0.3s ease;
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-index > li:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 71, 236, 0.42);
  box-shadow: 0 24px 48px -14px rgba(20, 23, 40, 0.14), 0 4px 12px -2px rgba(36, 71, 236, 0.08);
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-index > li > a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 22px 24px 18px;
  min-height: 0;
  flex: 1;
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-index > li > a::before {
  display: none;
}

.rd-card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(145deg, #eff1ec 0%, #e5e8e2 100%);
  border: 1px solid rgba(25, 27, 28, 0.07);
  margin-bottom: 22px;
  overflow: hidden;
}

.rd-card-media.rd-media-private-banking {
  background: linear-gradient(145deg, #e8eef0 0%, #dde6e9 100%);
}

.rd-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  border-radius: 6px;
  filter: drop-shadow(0 8px 20px rgba(20, 23, 28, 0.1));
}

.rd-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(251, 251, 248, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(25, 27, 28, 0.1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--v-ink);
}

body.redesign-v3 #work[data-work-layout="bento"] .wo-num {
  display: none;
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-main {
  display: block;
}

body.redesign-v3 #work[data-work-layout="bento"] .wo-name {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 620;
  letter-spacing: -0.035em;
  color: var(--v-ink);
  transform: none !important;
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-summary {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--v-muted);
  max-width: 48ch;
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(25, 27, 28, 0.12);
  font-size: 13px;
  color: var(--v-ink);
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-focus small {
  margin: 0;
  font-size: 12px;
  color: var(--v-muted);
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-status {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 520;
}

body.redesign-v3 #work[data-work-layout="bento"] .wi-arrow {
  display: none;
}

.rd-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 15px 24px;
  background: #f3f4ef;
  border-top: 1px solid rgba(25, 27, 28, 0.08);
}

/* Override .wo .wi-index a grid rules so footer links stay clean inline-flex pills/links */
body.redesign-v3 #work .wi-index .rd-card-foot > a {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 6px;
  min-height: 34px !important;
  padding: 0 !important;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.2;
}

body.redesign-v3 #work .wi-index .rd-card-foot > a::before {
  display: none !important;
}

body.redesign-v3 #work .wi-index .rd-card-foot > a.rd-jump-link {
  color: var(--v-muted);
  transition: color 0.2s ease;
}

body.redesign-v3 #work .wi-index .rd-card-foot > a.rd-jump-link:hover {
  color: var(--v-ink);
}

body.redesign-v3 #work .wi-index .rd-card-foot > a.rd-case-link {
  color: var(--rd-cobalt);
  padding: 6px 14px !important;
  border-radius: 999px;
  background: rgba(36, 71, 236, 0.08);
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.redesign-v3 #work .wi-index .rd-card-foot > a.rd-case-link:hover {
  background: var(--rd-cobalt);
  color: #ffffff;
  text-decoration: none;
}

/* Architectural Index Mode (when switched to 'ledger') */
body.redesign-v3 #work[data-work-layout="ledger"] .rd-card-foot {
  display: none;
}

body.redesign-v3 #work[data-work-layout="ledger"] .rd-card-tag {
  display: none;
}

body.redesign-v3 #work[data-work-layout="ledger"] .wi-index > li > a {
  display: grid;
  grid-template-columns: 36px 148px minmax(0, 1.2fr) minmax(160px, 0.7fr) 150px 24px;
  gap: 22px;
  align-items: center;
  padding: 22px 12px;
}

body.redesign-v3 #work[data-work-layout="ledger"] .rd-card-media {
  width: 148px;
  height: 94px;
  padding: 8px;
  margin: 0;
  border-radius: 10px;
}

/* ---------- 4. Featured Case Chapters & Dual-Phone Private Banking ---------- */
body.redesign-v3 main > article.feature {
  box-shadow: var(--rd-shadow-elevated), inset 0 1px 0 var(--rd-border-highlight);
}

/* Prevent contain:paint + filter from dropping hardware-decoded <video> layers
   or breaking sticky gallery containers inside depth-scroll panels */
html.depth-scroll:not(.motion-paused) body.redesign-v3 [data-depth-card] {
  contain: none !important;
  filter: none !important;
}

/* Ensure product-gallery video containers and <video> elements never collapse
   or lose their compositor layer */
body.redesign-v3 .product-gallery .gallery-media {
  position: relative;
}

body.redesign-v3 .product-gallery:not(.compliance-walkthrough) .gallery-media > video,
body.redesign-v3 .product-gallery:not(.compliance-walkthrough) .video-zoom-frame > video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Compliance AI single walkthrough: use block layout + max-height: none so <video>
   never collapses to 0px height inside an auto-height flex container */
body.redesign-v3 .compliance-walkthrough .gallery-media {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1600 / 880;
}

body.redesign-v3 .compliance-walkthrough .gallery-media > video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: 1600 / 880;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.redesign-v3 .product-gallery .video-toolbar {
  z-index: 4;
}

body.redesign-v3 .ph-meta li {
  background: rgba(255, 255, 255, 0.66);
  font-weight: 500;
}

/* Private Banking Dual-Stage Showcase */
.rd-banking-showcase {
  margin-top: 32px;
}

.rd-banking-stage {
  margin: 0;
  border-radius: 22px;
  border: 1px solid rgba(25, 27, 28, 0.11);
  background: radial-gradient(110% 90% at 15% 10%, #ffffff 0%, #edf2f1 58%, #e2ebe9 100%);
  overflow: clip;
  box-shadow: inset 0 1px 0 #ffffff;
}

.rd-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 26px;
  border-bottom: 1px solid rgba(25, 27, 28, 0.09);
  background: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
}

.rd-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--v-ink);
}

.rd-stage-meta {
  color: var(--v-muted);
}

.rd-phone-Duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 310px));
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(32px, 4.5vw, 56px) 24px;
}

.rd-phone-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rd-phone-primary {
  filter: drop-shadow(0 20px 38px rgba(18, 21, 34, 0.18));
}

.rd-banking-video {
  display: block;
  width: min(100%, 290px);
  height: auto;
  aspect-ratio: 918 / 1816;
  background: transparent;
  -webkit-mask: url('/assets/portfolio-editorial/banking-phone-mask.svg') center / 100% 100% no-repeat;
  mask: url('/assets/portfolio-editorial/banking-phone-mask.svg') center / 100% 100% no-repeat;
}

.rd-phone-secondary img {
  display: block;
  width: min(100%, 276px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 38px rgba(18, 21, 34, 0.15));
}

.rd-banking-caption {
  padding: 22px 28px;
  border-top: 1px solid rgba(25, 27, 28, 0.09);
  background: rgba(251, 251, 248, 0.78);
}

.rd-caption-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
}

.rd-caption-points strong {
  display: block;
  font-size: 13px;
  font-weight: 620;
  color: var(--v-ink);
  margin-bottom: 4px;
}

.rd-caption-points span {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v-muted);
}

.rd-confidential-note {
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(25, 27, 28, 0.07);
  font-size: 12px;
  color: var(--v-muted);
}

/* ---------- 5. Practice & About Refinements ---------- */
body.redesign-v3 .practice-details {
  display: grid;
  gap: 18px;
}

body.redesign-v3 .practice-details article {
  margin: 0 !important;
  padding: 24px 28px !important;
  border-radius: 18px;
  border: 1px solid rgba(36, 71, 236, 0.14) !important;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 8px 24px -12px rgba(24, 36, 96, 0.08);
}

body.redesign-v3 .about-intro figure img {
  border-radius: 20px;
  border: 1px solid rgba(25, 27, 28, 0.12);
  box-shadow: 0 16px 36px -12px rgba(25, 27, 28, 0.16);
}

/* ---------- 5b. Contact Finale Card & Travelling Metallic CTA Rim ---------- */
@property --rd-cta-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rd-metallic-orbit {
  to { --rd-cta-angle: 360deg; }
}

body.redesign-v3 #contact .finale-cta {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* Dual-layer metallic light travelling along the Contact me CTA stroke:
   complements the WebGL button rim and ensures razor-sharp 2px specular reflection */
body.redesign-v3 #contact .finale-cta::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  padding: 2px;
  background: conic-gradient(
    from var(--rd-cta-angle),
    rgba(30, 35, 45, 0.35) 0deg,
    rgba(120, 136, 215, 0.65) 55deg,
    #ffffff 88deg,
    #bec8f9 108deg,
    #8a9df5 132deg,
    rgba(30, 35, 45, 0.25) 185deg,
    rgba(248, 198, 111, 0.75) 245deg,
    #ffffff 275deg,
    rgba(134, 150, 226, 0.6) 310deg,
    rgba(30, 35, 45, 0.35) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--finale-shader, 0);
  pointer-events: none;
  animation: rd-metallic-orbit 5.5s linear infinite;
  filter: drop-shadow(0 0 6px rgba(176, 188, 248, 0.55));
}

html.motion-paused body.redesign-v3 #contact .finale-cta::after {
  animation-play-state: paused;
}

/* ---------- 6. Floating Redesign Studio Bar ---------- */
.rd-studio-bar {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.92);
  color: #f6f6f2;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  font-size: 12px;
}

.rd-studio-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rd-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4260ee;
  box-shadow: 0 0 0 3px rgba(66, 96, 238, 0.25);
}

.rd-studio-badge strong {
  font-weight: 650;
  color: #ffffff;
}

.rd-studio-badge span {
  color: rgba(246, 246, 242, 0.68);
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.rd-studio-actions {
  display: inline-flex;
  gap: 6px;
}

.rd-studio-btn {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 550;
  transition: background 0.2s ease;
}

.rd-studio-btn:hover {
  background: var(--rd-cobalt);
}

.redesign-preview-note {
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(127, 147, 244, 0.14);
  border: 1px solid rgba(127, 147, 244, 0.35);
  color: #d9dffc;
  font-size: 12.5px;
  margin-bottom: 18px !important;
}

/* ---------- Responsive Breakpoints ---------- */
@media (max-width: 1050px) {
  .rd-hero-footer {
    grid-template-columns: 1fr;
  }
  .rd-scene-bar {
    align-items: flex-start;
  }
  body.redesign-v3 #work[data-work-layout="bento"] .wi-index {
    grid-template-columns: 1fr;
  }
  body.redesign-v3 #work[data-work-layout="ledger"] .wi-index a {
    grid-template-columns: 28px 110px minmax(0, 1fr) 120px 20px;
  }
  body.redesign-v3 #work[data-work-layout="ledger"] .wi-focus {
    display: none;
  }
  .rd-caption-points {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 760px) {
  body.redesign-v3 .v-nav {
    width: calc(100% - 24px);
    min-height: 58px;
    padding: 8px 16px;
    border-radius: 26px;
    flex-wrap: wrap;
  }
  body.redesign-v3 .v-brand {
    white-space: nowrap;
    flex-shrink: 0;
  }
  body.redesign-v3 .v-nav nav {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  body.redesign-v3 .v-nav nav > a:nth-child(2) {
    display: inline-flex;
  }
  body.redesign-v3 .v-nav .nav-email {
    position: absolute;
    top: 8px;
    right: 10px;
    white-space: nowrap;
  }
  body.redesign-v3 .v-brand span,
  .rd-eyebrow-coord {
    display: none;
  }
  .study-on body.redesign-v3 main > .v-hero {
    width: 100%;
    min-height: 0;
    padding: 150px 20px 44px;
  }
  .rd-menu-ready body.redesign-v3 .v-nav {
    z-index: 220;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    min-height: 58px;
    padding: 6px 12px;
    border-radius: 999px;
  }
  .rd-menu-ready body.redesign-v3 .v-nav nav {
    display: none;
  }
  .rd-menu-ready .rd-menu-toggle {
    display: inline-flex;
  }
  .rd-menu-ready.study-on body.redesign-v3 main > .v-hero {
    padding-top: 110px;
  }
  .rd-telemetry {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rd-phone-Duo {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .rd-studio-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    justify-content: space-between;
  }
  .rd-studio-badge span {
    display: none;
  }
}

@media print {
  .rd-studio-bar,
  .rd-scene-bar,
  .rd-work-switcher {
    display: none !important;
  }
}

/* Hero leading: +14% over the original 1.04 on mobile (+12% desktop). */
@media (max-width: 760px) {
  .study-on body.redesign-v3 .v-hero h1 { line-height: 1.1856; }
}

/* Requested button palette */
body.portfolio-open-layout.redesign-v3 .v-nav .nav-email,
body.portfolio-open-layout.redesign-v3 :is(.action, .contact-submit, .contact-return),
body.redesign-v3 #contact .finale-cta,
body.redesign-v3 :is(.action, .nav-email, .contact-submit, .contact-return).nm-fill::before {
  background: #3F5EFB;
  background: linear-gradient(115deg, #FC466B 0%, #3F5EFB 100%);
  color: #fff;
  border-color: transparent;
}
/* Cobalt / Raspberry / Chalk: color carries hierarchy; terrain carries expression. */
:root, body.redesign-v3 {
  --v-paper: #F2F1EB; --v-ink: #20232B; --v-blue: #3454ED;
  --v-muted: #62646B; --v-line: #D8D7CF;
  --rd-cobalt: #3454ED; --rd-indigo: #3454ED;
  --rd-surface-glass: #f2f1ebf5; --rd-surface-card: #F2F1EB;
  --rd-border-crisp: #D8D7CF; --rd-border-highlight: transparent;
  --s-l2: #F2F1EB; --s-stroke: #D8D7CF;
  --theme-raspberry: #CB2455; --theme-raspberry-hover: #AD1945;
}
body.redesign-v3 { background: #F2F1EB; color: #20232B; }
body.redesign-v3 .v-nav { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 18px #20232b06; }
.study-on body.redesign-v3 .v-hero h1 > .blue {
  background: none; -webkit-text-fill-color: #20232B; color: #20232B;
}
.study-on body.redesign-v3 .v-hero h1 .rd-h1-accent {
  background: none; -webkit-text-fill-color: #3454ED; color: #3454ED;
}
body.portfolio-open-layout.redesign-v3 .v-nav .nav-email,
body.portfolio-open-layout.redesign-v3 :is(.action, .contact-submit, .contact-return),
body.redesign-v3 #contact .finale-cta,
body.redesign-v3 :is(.action, .nav-email, .contact-submit, .contact-return).nm-fill::before {
  background: #CB2455; color: #fff; border-color: transparent; box-shadow: none;
}
body.portfolio-open-layout.redesign-v3 .v-nav .nav-email:hover,
body.portfolio-open-layout.redesign-v3 :is(.action, .contact-submit, .contact-return):hover,
body.redesign-v3 #contact .finale-cta:hover,
body.redesign-v3 :is(.action, .nav-email, .contact-submit, .contact-return).nm-fill::before {
  background: #AD1945; color: #fff;
}
body.redesign-v3 .practice-details article { background: #F2F1EB; border-color: #D8D7CF !important; box-shadow: none; }
body.redesign-v3 :is(.rd-work-card, .rd-quick-fact) { box-shadow: none; }
body.redesign-v3 .practice-chapter { background: #DCE3F3; }
/* A quiet dark ending replaces the chrome material while retaining contact behavior. */
.study-on body.portfolio-open-layout main > #contact.contact-finale { height: 100svh; background: #20232B; }
body.redesign-v3 #contact :is(.finale-canvas, .finale-path-contour, .finale-surface, .finale-utilities) { display: none; }
body.redesign-v3 #contact .finale-card { transform: none; }
body.redesign-v3 #contact [data-finale-text] { opacity: 1; color: #F2F1EB; -webkit-text-fill-color: #F2F1EB; background: none; }
body.redesign-v3 #contact :is(.overline, h2, h2 a) { color: #F2F1EB; }
body.redesign-v3 #contact .finale-cta::after { display: none; }
body.redesign-v3 .v-footer { background: #20232B; color: #F2F1EB; border-color: #ffffff26; width: auto; margin: 0; padding-inline: max(24px,4vw); }

/* Polished glass-chrome primary actions: cobalt face, cool metallic reflections. */
body.portfolio-open-layout.redesign-v3 .v-nav .nav-email,
body.portfolio-open-layout.redesign-v3 :is(.action, .contact-submit, .contact-return),
body.redesign-v3 #contact .finale-cta {
  color: #ffffff;
  border: 1px solid transparent;
  background:
    linear-gradient(112deg, transparent 22%, #ffffff3d 39%, #ffffff08 48%, transparent 59%) 65% 0 / 230% 100% padding-box,
    linear-gradient(180deg, #617cf4 0%, #3454ed 24%, #2945c8 48%, #1d3294 51%, #2d4ad1 74%, #4565ef 100%) padding-box,
    linear-gradient(125deg, #b5c5ff 0%, #546dc7 22%, #263a89 43%, #96acff 58%, #4059b0 77%, #d2dcff 100%) border-box;
  box-shadow: inset 0 1px 1px #c4d2ff99, inset 0 -1px 2px #14286d99, 0 3px 7px #20232b12;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-shadow: 0 1px 2px #15266088;
  transition: background-position .65s ease, box-shadow .25s ease, transform .3s ease;
}
body.portfolio-open-layout.redesign-v3 .v-nav .nav-email:hover,
body.portfolio-open-layout.redesign-v3 :is(.action, .contact-submit, .contact-return):hover,
body.redesign-v3 #contact .finale-cta:hover {
  color: #ffffff;
  background:
    linear-gradient(112deg, transparent 22%, #ffffff52 39%, #ffffff0a 48%, transparent 59%) 15% 0 / 230% 100% padding-box,
    linear-gradient(180deg, #7390ff 0%, #405fee 24%, #304bc9 48%, #213995 51%, #3452d6 74%, #5372f2 100%) padding-box,
    linear-gradient(125deg, #b5c5ff 0%, #546dc7 22%, #263a89 43%, #96acff 58%, #4059b0 77%, #d2dcff 100%) border-box;
  box-shadow: inset 0 1px 1px #c4d2ff99, inset 0 -1px 2px #14286d99, 0 5px 12px #20232b20;
}
body.redesign-v3 :is(.action, .nav-email, .contact-submit, .contact-return).nm-fill::before { display: none; }
body.portfolio-open-layout.redesign-v3 :is(.action, .nav-email, .contact-submit, .contact-return):focus-visible {
  color: #ffffff; outline: 2px solid #3454ED; outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  body.redesign-v3 :is(.action, .nav-email, .contact-submit, .contact-return) { transition: none; }
}
@media (forced-colors: active) {
  body.redesign-v3 :is(.action, .nav-email, .contact-submit, .contact-return) { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
}
/* Original prism background, isolated behind native accessible footer content. */
body.redesign-v3 #contact .prism-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
body.redesign-v3 #contact .finale-card { z-index:1; pointer-events:none; }
body.redesign-v3 #contact .finale-content { pointer-events:auto; }
body.redesign-v3 #contact .prism-pause { position:absolute; bottom:28px; right:max(24px,4vw); z-index:2; background:#151c30cc; color:#e5e9f6; border:1px solid #ffffff33; border-radius:30px; padding:10px 16px; min-height:44px; font:inherit; font-size:12px; cursor:pointer; }
body.redesign-v3 #contact .prism-pause:focus-visible { outline:2px solid #9baeff; outline-offset:4px; }
body.redesign-v3 #contact .prism-pause:disabled { cursor:default; opacity:.65; }