/* ============================================================
   DDT REVAMP LAYER  ·  "Quiet confidence, with a wink"
   ------------------------------------------------------------
   Loaded AFTER styles.css. Everything is scoped under html.rv.

   Colours: brand tokens only (locked). New here: type families,
   type scale, rhythm, and the pixel-system components.
   ============================================================ */

html.rv {
  /* ---- type families ---- */
  --rv-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --rv-sans: "Geist", "Inter", system-ui, sans-serif;
  --rv-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* legacy font tokens re-pointed, so nav / footer / buttons follow */
  --font-heading: var(--rv-sans);
  --font-body: var(--rv-sans);
  --font-label: var(--rv-sans);
  --font-button: var(--rv-sans);

  /* ---- colour roles (aliases of the locked brand tokens) ---- */
  --rv-ink: var(--color-text-primary);            /* #111827 */
  --rv-ink-2: #374151;                            /* neutral, body on white (10.3:1) */
  --rv-ink-3: var(--color-text-tertiary);         /* #6b7280 */
  --rv-line: var(--color-border-default);         /* #e5e7eb */
  --rv-paper: var(--color-background-default);    /* #fafafa */
  --rv-brand: var(--color-surface-brand-primary); /* #4a3dcc */
  --rv-brand-soft: var(--color-surface-brand-primary-subtle);
  --rv-teal: var(--color-surface-brand-secondary);   /* #29ccb2 (fills) */
  --rv-teal-ink: var(--color-text-brand-secondary);  /* #24b39d (text on white, large only) */
  --rv-teal-soft: var(--color-surface-brand-secondary-subtle);

  /* ---- type scale (fluid, exact at 1440) ---- */
  --rv-display: clamp(52px, 7.2vw, 108px);
  --rv-h2: clamp(38px, 4vw, 60px);
  --rv-h3: clamp(26px, 2.2vw, 34px);
  --rv-lead: clamp(18px, 1.4vw, 21px);
  --rv-body: 17px;

  /* ---- rhythm ---- */
  --rv-section: clamp(96px, 11vw, 168px);
  --rv-max: 1248px;
  --rv-ease: cubic-bezier(.2, .7, .1, 1);
  /* the logo's own shape: a circle with one sharp corner */
  --rv-petal: 50% 50% 0 50%;
}

html.rv body { font-family: var(--rv-sans); color: var(--rv-ink); -webkit-font-smoothing: antialiased; }

/* ---------- shared building blocks ---------- */
.rv .rvWrap { width: min(var(--rv-max), 100% - 2 * var(--pad-x)); margin-inline: auto; }

/* pixel icon (rendered by revamp.js from a bitmap) */
.rv .rvPx { display: block; width: 100%; height: auto; overflow: visible; }

/* scroll reveal (revamp-owned, independent of legacy reveal) */
.rv [data-rv-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--rv-ease), transform .9s var(--rv-ease); transition-delay: var(--d, 0s); }
.rv [data-rv-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   ADVISORY PAGE
   ============================================================ */

/* ---- hero ---- */
.rv .avHero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: calc(80px + clamp(32px, 4vw, 56px)) 0 clamp(28px, 3vw, 40px); background: var(--rv-paper); overflow: hidden; }
.rv .avHero > .rvWrap { flex: 1; display: flex; flex-direction: column; }
.rv .avHero__grid { flex: 1; }
.rv .avHero::before { /* precision dot grid, fading out */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 1px 1px, #d9dce3 1px, transparent 1.4px) 0 0 / 24px 24px;
  -webkit-mask: radial-gradient(120% 90% at 78% 40%, #000 0%, transparent 70%);
          mask: radial-gradient(120% 90% at 78% 40%, #000 0%, transparent 70%);
  opacity: .7;
}
.rv .avHero__grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.rv .avHero__copy { grid-column: 1 / span 7; position: relative; z-index: 1; }
.rv .avHero__title { margin: 28px 0 28px; }
.rv .avHero__title .avHero__line { display: block; }
.rv .avHero__lead { max-width: 560px; }
.rv .avHero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 40px; }

.rv .avHero__art { grid-column: 8 / span 5; position: relative; margin-left: -6%; margin-right: calc(-1 * clamp(0px, 2vw, 32px)); }

/* ---- view (philosophy) ---- */

/* editorial photo: slow living zoom, scroll parallax, hover lift */

@keyframes avDrift { 0% { transform: scale(1.06) translate3d(0, 0, 0); } 100% { transform: scale(1.14) translate3d(-2%, -3%, 0); } }
.rv .avLens { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s var(--rv-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.5 -.5 1 1'%3E%3Cpath d='M.5 .5H0A.5 .5 0 1 1 .5 0Z'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.5 -.5 1 1'%3E%3Cpath d='M.5 .5H0A.5 .5 0 1 1 .5 0Z'/%3E%3C/svg%3E") no-repeat;
  -webkit-mask-size: 220px 220px; mask-size: 220px 220px;
  -webkit-mask-position: calc(var(--lx, -400px) - 110px) calc(var(--ly, -400px) - 110px); mask-position: calc(var(--lx, -400px) - 110px) calc(var(--ly, -400px) - 110px); }
.rv .avLens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: avDrift 22s ease-in-out infinite alternate; }
.rv .avLens__ring { position: absolute; z-index: 3; left: calc(var(--lx, -400px) - 110px); top: calc(var(--ly, -400px) - 110px); width: 220px; height: 220px;
  border-radius: var(--rv-petal); border: 1.5px solid rgba(255, 255, 255, .95); pointer-events: none;
  opacity: 0; transform: scale(.55); transition: opacity .35s var(--rv-ease), transform .55s cubic-bezier(.2, .8, .2, 1.2); }
.rv .avLens__tag { position: absolute; z-index: 3; left: calc(var(--lx, -400px) + 86px); top: calc(var(--ly, -400px) + 92px); display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px; background: #fff; color: var(--rv-ink); white-space: nowrap; pointer-events: none;
  font: 500 11px/1 var(--rv-mono); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .45s var(--rv-ease); }
.rv .avLens__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rv-teal); }
.rv .avLens__tag[data-w="core"]::before { border-radius: var(--rv-petal); }
.rv .avLens__tag[data-w="core"]::before { background: var(--rv-brand); }
@keyframes avPing { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

/* layer stack: the core stays, layers extend above it (hairline, editorial) */

@keyframes avPacket { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }

/* ---- services ---- */

.rv .avItem { position: relative; padding: 36px 0 40px; border-top: 1px solid var(--rv-line); }
.rv .avItem:last-child { border-bottom: 1px solid var(--rv-line); }
.rv .avItem::before { /* pixel node on the rail */
  content: ""; position: absolute; left: -34px; top: 40px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px #c7cbd3; transition: background .4s, box-shadow .4s, transform .6s var(--rv-ease);
}
.rv .avItem.is-on::before { background: var(--rv-teal); box-shadow: inset 0 0 0 1.5px var(--rv-teal); }
.rv .rvPx path, .rv .rvPx circle { animation: pxScan 4.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 110ms); }
.rv .rvPx .is-o { animation: pxBlink 2.2s steps(1) infinite; animation-delay: calc(var(--k, 0) * 90ms); }
.rv .rvPx__p { transform-box: fill-box; }
@keyframes pxScan { 0%, 70%, 100% { opacity: 1; } 35% { opacity: .35; } }
@keyframes pxBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }

/* ---- closing ---- */

/* ---- responsive ---- */

@media (max-width: 1100px) {
  .rv .avHero { min-height: 0; }
  .rv .avHero__copy { grid-column: 1 / span 12; }
  .rv .avHero__art { grid-column: 1 / span 12; max-width: 480px; margin: 56px 0 0; }
  .rv .avCore, .rv .avLegend { margin-left: 0 !important; }
  .rv .avView__main, .rv .avPhoto { grid-column: 1 / span 12; }
  .rv .avPhoto__frame { aspect-ratio: 4 / 3; }
  .rv .avSvc__intro { grid-column: 1 / span 12; position: static; }
  .rv .avSvc__list { grid-column: 1 / span 12; }
}
@media (max-width: 640px) {
  .rv .avHero__actions { gap: 18px; }
  .rv .avItem::before { left: -24px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv .avLens img, .rv .rvPx path, .rv .rvPx circle { animation: none; }
  .rv [data-rv-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   BUTTONS (revamp) — the legacy .btn markup, restyled.
   styles.css is untouched; selectors here are doubled (.btn.btn)
   so they win over the many legacy nav/scroll/mega overrides.

   Anatomy  : pill · label · round arrow chip
   Hover    : colour pours in from where the cursor ENTERS and drains
              out where it LEAVES (--bx/--by set by revamp.js); the
              label and chip lean toward the cursor (magnetic, --mx/--my);
              the arrow swaps (legacy arrow pair).
   Variants : --purple (primary on light) · --solid (white, on dark or
              purple) · --outline (ghost, on dark) · nav CTA follows the
              bar state.
   ============================================================ */
html.rv .btn.btn {
  --b-bg: var(--rv-brand); --b-fg: #fff; --b-tile: #fff; --b-arrow: var(--rv-brand);
  --b-fill: var(--rv-ink); --b-fg-h: #fff; --b-tile-h: #fff; --b-arrow-h: var(--rv-ink);
  height: 52px; padding: 0 7px 0 24px; gap: 16px; border-radius: 999px;
  background: var(--b-bg); box-shadow: none; border: 0; isolation: isolate;
  transition: transform .25s var(--rv-ease);
}
html.rv .btn.btn:active { transform: scale(.98); }
html.rv .btn.btn::after { display: none; }
html.rv .btn.btn::before {
  content: ""; position: absolute; z-index: 0; inset: auto; right: auto;
  left: var(--bx, 50%); top: var(--by, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--b-fill); transform: scale(0);
  transition: transform .6s cubic-bezier(.2, .7, .1, 1);
}
html.rv .btn.btn:hover::before, html.rv .btn.btn:focus-visible::before { transform: scale(64); }
html.rv .btn.btn .btn__label {
  font: 500 15px/1 var(--rv-sans); letter-spacing: -.005em; color: var(--b-fg);
  transform: translate(calc(var(--mx, 0) * 3px), calc(var(--my, 0) * 2px));
  transition: color .35s .05s, transform .45s var(--rv-ease);
}
html.rv .btn.btn .btn__tile {
  width: 40px; height: 40px; border-radius: 50%; margin: 0;
  background: var(--b-tile); color: var(--b-arrow);
  transform: translate(calc(var(--mx, 0) * 2.5px), calc(var(--my, 0) * 3px));
  transition: background-color .35s, color .35s, transform .5s var(--rv-ease);
}
html.rv .btn.btn .btn__arrows, html.rv .btn.btn .icon-arrow { width: 18px; height: 18px; }
html.rv .btn.btn:hover .btn__label, html.rv .btn.btn:focus-visible .btn__label { color: var(--b-fg-h); }
html.rv .btn.btn:hover .btn__tile, html.rv .btn.btn:focus-visible .btn__tile { background: var(--b-tile-h); color: var(--b-arrow-h); }
html.rv .btn.btn:focus-visible { outline: 2px solid var(--rv-teal); outline-offset: 3px; }

/* white button: on purple cards and dark heroes */
html.rv .btn.btn--solid {
  --b-bg: #fff; --b-fg: var(--rv-ink); --b-tile: var(--rv-brand); --b-arrow: #fff;
  --b-fill: var(--rv-brand); --b-fg-h: #fff; --b-tile-h: #fff; --b-arrow-h: var(--rv-brand);
}
/* ghost button: on dark / photo backgrounds */
html.rv .btn.btn--outline {
  --b-bg: transparent; --b-fg: #fff; --b-fill: #fff; --b-fg-h: var(--rv-brand);
  padding: 0 26px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

/* nav CTA: compact; purple on the white bar, white over a dark hero */
html.rv .nav .nav__cta.btn {
  --b-bg: var(--rv-brand); --b-fg: #fff; --b-tile: #fff; --b-arrow: var(--rv-brand);
  --b-fill: var(--rv-ink); --b-fg-h: #fff; --b-tile-h: #fff; --b-arrow-h: var(--rv-ink);
  height: 44px; padding: 0 4px 0 18px; gap: 12px;
}
html.rv .nav:not(.nav--scrolled):not(.is-mega-open):not(.is-drawer-open) .nav__cta.btn {
  --b-bg: #fff; --b-fg: var(--rv-ink); --b-tile: var(--rv-brand); --b-arrow: #fff;
  --b-fill: var(--rv-brand); --b-fg-h: #fff; --b-tile-h: #fff; --b-arrow-h: var(--rv-brand);
}
html.rv .nav .nav__cta.btn .btn__label { font-size: 14px; font-weight: 500; }
html.rv .nav .nav__cta.btn .btn__tile { width: 36px; height: 36px; }
html.rv .nav .nav__cta.btn::before { background: var(--b-fill); }

@media (max-width: 620px) {
  html.rv .btn.btn:not(.nav__cta) { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  html.rv .btn.btn::before { transition: none; }
  html.rv .btn.btn .btn__label, html.rv .btn.btn .btn__tile { transform: none; }
}

/* ---- button QA fixes (2026-10-15) ---- */
/* 1. the spare arrow waits outside a clipped window, so only one arrow is ever visible at rest */
html.rv .btn.btn .btn__arrows { overflow: hidden; border-radius: 2px; }
html.rv .btn.btn .icon-arrow--b { transform: translate(-110%, 110%); }
html.rv .btn.btn:hover .icon-arrow--a, html.rv .btn.btn:focus-visible .icon-arrow--a { transform: translate(110%, -110%); }
html.rv .btn.btn:hover .icon-arrow--b, html.rv .btn.btn:focus-visible .icon-arrow--b { transform: translate(0, 0); }

/* 2. brand outline button (mega menu promos): white pill, brand hairline that stays on top of the fill */
html.rv .btn.btn--brandline {
  --b-bg: #fff; --b-fg: var(--rv-brand); --b-fill: var(--rv-brand); --b-fg-h: #fff;
  padding: 0 22px;
}
html.rv .btn.btn--brandline::after {
  display: block; content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1px solid var(--rv-brand); border-radius: inherit;
}
/* ghost button keeps its hairline above the fill as well */
html.rv .btn.btn--outline { box-shadow: none; }
html.rv .btn.btn--outline::after {
  display: block; content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: inherit; transition: border-color .35s;
}
html.rv .btn.btn--outline:hover::after { border-color: #fff; }

/* 3. small size (mega menu promos) */
html.rv .btn.btn--sm { height: 44px; padding: 0 5px 0 18px; gap: 12px; }
html.rv .btn.btn--sm.btn--brandline, html.rv .btn.btn--sm.btn--outline { padding: 0 18px; }
html.rv .btn.btn--sm .btn__label { font-size: 14px; }
html.rv .btn.btn--sm .btn__tile { width: 34px; height: 34px; }
html.rv .btn.btn--sm .btn__arrows, html.rv .btn.btn--sm .icon-arrow { width: 16px; height: 16px; }

/* 4. full-width buttons: label left, chip pinned right */
html.rv .navPromo__actions .btn.btn, html.rv .srvPromo__actions .btn.btn,
html.rv .promo__actions .btn.btn--purple, html.rv .btn.btn.drawer__cta, html.rv .btn.btn.contactForm__submit { justify-content: space-between; }
html.rv .navPromo__actions .btn.btn--outline { justify-content: flex-start; }
html.rv .btn.btn .btn__label { text-align: left; }
html.rv .btn.btn.contactForm__submit:disabled { opacity: .55; }
html.rv .btn.btn.contactForm__submit:disabled::before { transform: scale(0); }

/* 5. the photo lens ring reads on bright sky and on dark glass alike */
.rv .avLens__ring { box-shadow: 0 0 0 1px rgba(17, 24, 39, .28), inset 0 0 0 1px rgba(17, 24, 39, .18); }

/* ---- button QA fixes, round 2 ---- */
/* fill: grows from its own centre (legacy variants set origin to bottom), sized per button by JS (--bs) */
html.rv .btn.btn::before {
  width: 20px; height: 20px; margin: -10px 0 0 -10px; bottom: auto; right: auto;
  transform-origin: 50% 50%;
}
html.rv .btn.btn:hover::before, html.rv .btn.btn:focus-visible::before, html.rv .btn.btn:active::before { transform: scale(var(--bs, 80)); }
/* once the fill has landed, the button itself takes the fill colour, so no hairline of the old colour shows at the curved edges */
html.rv .btn.btn:hover, html.rv .btn.btn:focus-visible {
  background-color: var(--b-fill);
  transition: transform .25s var(--rv-ease), background-color 0s linear .55s;
}
/* white button sits on purple surfaces: it fills with ink, never with the surface colour */
html.rv .btn.btn--solid { --b-fill: var(--rv-ink); --b-fg-h: #fff; --b-tile-h: #fff; --b-arrow-h: var(--rv-ink); }
html.rv .nav:not(.nav--scrolled):not(.is-mega-open):not(.is-drawer-open) .nav__cta.btn { --b-fill: var(--rv-ink); --b-arrow-h: var(--rv-ink); }
/* touch: a press shows the same state as hover */
html.rv .btn.btn:active .btn__label { color: var(--b-fg-h); }
html.rv .btn.btn:active .btn__tile { background: var(--b-tile-h); color: var(--b-arrow-h); }
/* the chip is always part of the row (legacy phones made it absolute) */
html.rv .btn.btn .btn__tile { position: static; inset: auto; top: auto; right: auto; }
html.rv .btn.btn .btn__label { padding-right: 0; }
@media (max-width: 620px) {
  html.rv .btn.btn:not(.nav__cta) { padding: 0 6px 0 22px; }
  html.rv .btn.btn--outline, html.rv .btn.btn--brandline { justify-content: center; padding: 0 22px; }
}
/* products mega promo: two buttons stack so neither is squeezed */
html.rv .promo__actions { flex-direction: column; align-items: stretch; gap: 8px; }
html.rv .promo__actions .btn.btn { width: 100%; flex: none; }
html.rv .promo__actions .btn.btn--brandline { justify-content: center; }
/* client logos ship with an opaque light box: multiply drops it into the page tone */

/* ============================================================
   ENTRANCES (system) — every section arrives with intent
   data-rv-reveal            rise: fade + lift (default)
   data-rv-reveal="wipe"     headings/cards open upward like a curtain
   data-rv-reveal="blur"     body copy comes into focus
   data-rv-reveal="rule"     section rule draws left to right, label slides in
   data-rv-stagger           children reveal one after another (JS sets --d)
   ============================================================ */
html.rv { --rv-out: cubic-bezier(.16, 1, .3, 1); }
.rv [data-rv-reveal="wipe"] {
  opacity: 1; transform: translateY(26px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--rv-out), transform 1.15s var(--rv-out); transition-delay: var(--d, 0s);
}
.rv [data-rv-reveal="wipe"].is-in { clip-path: inset(-12% -4% -18% -4%); transform: none; }
.rv [data-rv-reveal="blur"] {
  opacity: 0; filter: blur(10px); transform: translateY(10px);
  transition: opacity 1s ease, filter 1s ease, transform 1s var(--rv-out); transition-delay: var(--d, 0s);
}
.rv [data-rv-reveal="blur"].is-in { opacity: 1; filter: none; transform: none; }
.rv [data-rv-reveal="rule"] { opacity: 1; transform: none; }

/* ---- section rule: hairline, label left, index right ---- */

/* ---- ghost button (secondary): hairline pill, soft chip, arrow slides down ---- */
html.rv .btn.btn--ghost {
  --b-bg: transparent; --b-fg: var(--rv-ink); --b-tile: #f3f4f6; --b-arrow: var(--rv-ink);
  --b-fill: var(--rv-ink); --b-fg-h: #fff; --b-tile-h: #fff; --b-arrow-h: var(--rv-ink);
}
html.rv .btn.btn--ghost::after {
  display: block; content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1px solid rgba(17, 24, 39, .16); border-radius: inherit; transition: border-color .35s;
}
html.rv .btn.btn--ghost:hover::after { border-color: var(--rv-ink); }
html.rv .btn.btn--ghost .icon-arrow--b { transform: translate(0, -115%); }
html.rv .btn.btn--ghost:hover .icon-arrow--a, html.rv .btn.btn--ghost:focus-visible .icon-arrow--a { transform: translate(0, 115%); }
html.rv .btn.btn--ghost:hover .icon-arrow--b, html.rv .btn.btn--ghost:focus-visible .icon-arrow--b { transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  .rv [data-rv-reveal="wipe"], .rv [data-rv-reveal="blur"] { clip-path: none; filter: none; opacity: 1; transform: none; transition: none; }
}

/* content follows the nav: same side padding at every width, no narrower centred column */
html.rv { --rv-max: 100%; }