/* ---------- Fonts ---------- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens (from the Figma file) ---------- */
:root {
  --bg: #ffffff;
  --text: #3c4142;
  --text-muted: #828b8c;
  --text-faint: #9aa4a5;
  --line: rgba(154, 164, 165, 0.16);
  --surface: #eef1f1;

  --content: 880px;
  --gutter: 20px;
  --space-section: clamp(44px, 7vw, 72px);
  --nav-top: clamp(16px, 5vw, 40px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 var(--gutter) 72px;
  background: var(--bg);
  color: var(--text);
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Navigation ---------- */
.nav {
  /* Full-width white bar that stays pinned while scrolling (Figma: 1436x80,
     padding 40px 278px 8px, background #fff). */
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-top) 0 8px;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: var(--bg);
}

.nav__group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 1000px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}

.pill:active {
  transform: scale(0.97);
}

.pill[aria-expanded="true"] {
  background: var(--surface);
  border-color: transparent;
}

.pill__chevron {
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--ease-out);
}

.pill[aria-expanded="true"] .pill__chevron {
  transform: rotate(180deg);
}

/* ---------- Dropdown ---------- */
.dropdown {
  position: relative;
}

.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 216px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px -8px rgba(60, 65, 66, 0.12), 0 2px 6px rgba(60, 65, 66, 0.04);

  /* closed state — exit is faster than enter */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top right;
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
}

.dropdown[data-open] .menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 150ms ease;
}

.menu__icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text);
}

/* Project logo */
.menu__icon--logo {
  width: 20px;
  height: 20px;
  margin-left: -2px;
}

.menu__meta {
  margin-left: auto;
  padding-left: 14px;
  color: var(--text-muted);
  font-weight: 400;
}

.menu__item:focus-visible {
  outline: none;
  background: var(--surface);
}

.menu__item[aria-current="page"] {
  background: var(--surface);
}

.menu__item[aria-disabled="true"] {
  color: var(--text-faint);
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .pill:hover {
    background: var(--surface);
    border-color: transparent;
  }

  a.menu__item:hover {
    background: var(--surface);
  }

  .text-link:hover {
    text-decoration-color: currentColor;
  }
}

/* ---------- Home ---------- */
main {
  margin-top: calc(var(--space-section) - 8px);
}

.intro {
  color: var(--text-muted);
  /* Same text size as the case study pages (Figma: 14px / 22.75px) */
  font-size: 14px;
  line-height: 22.75px;
}

.intro__title {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  margin-bottom: 32px;
  line-height: 20px;
}

.intro__title strong {
  color: var(--text);
  font-weight: 500;
}

.intro__title .dash {
  color: var(--text-faint);
}

.intro p + p {
  margin-top: 8px;
}

.intro b {
  color: var(--text);
  font-weight: 500;
}

.gallery {
  margin-top: var(--space-section);
}

.gallery__frame {
  overflow: hidden;
  border-radius: clamp(12px, 2.1vw, 18.333px);
  background: var(--surface);
}

.gallery__frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.caption {
  margin-top: 48px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
}

/* ---------- Case study ---------- */
.case__header {
  display: grid;
  gap: 32px;
}

.case__title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-muted);
}

.case__title strong {
  color: var(--text);
  font-weight: 500;
}

.case__title .dash {
  color: var(--text-faint);
}

.case__lead {
  color: var(--text-muted);
}

.case__section {
  margin-top: var(--space-section);
}

.shot {
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
}

.shot img {
  width: 100%;
}

.shot--plain {
  background: #f9f9f9;
}

.shot--dark {
  background: #000;
}

.notes {
  display: grid;
  gap: 24px;
  line-height: 22.75px;
}

.notes h2 {
  margin-bottom: 4px;
  color: var(--text);
}

.notes p {
  color: var(--text-muted);
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3.6vw, 32px);
}

.shots {
  display: grid;
  gap: var(--space-section);
}

@media (max-width: 560px) {
  .pair {
    grid-template-columns: 1fr;
    gap: var(--space-section);
  }
}

/* ---------- "AI tools" hover (Figma node 158:13657) ---------- */
.intro__title,
.intro p,
.ai-rest {
  transition: opacity 226ms ease-out;
}

.ai {
  position: relative;
  white-space: nowrap;
  cursor: default;
  border-radius: 4px;
}

.ai__icons {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.2em);
  width: 6.08em;
  height: 2.007em;
  margin-left: -3.04em;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.7);
  /* leaving: quick and plain */
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.ai__icons img {
  position: absolute;
  width: 1.4334em;
  max-width: none;
  transition: transform 140ms ease-out;
}

.ai__icons img:nth-child(1) { left: 0; top: 0.5736em; transform: rotate(12deg); }
.ai__icons img:nth-child(2) { left: 1.549em; top: 0; transform: rotate(32deg); }
.ai__icons img:nth-child(3) { left: 3.099em; top: 0; transform: rotate(-32deg); }
.ai__icons img:nth-child(4) { left: 4.648em; top: 0.5736em; transform: rotate(-12deg); }

/* Active state: everything but "AI tools" dims, icons spring in and fan out. */
.intro.is-ai .intro__title,
.intro.is-ai p:not(.ai-line),
.intro.is-ai .ai-rest {
  opacity: 0.6;
}

.intro.is-ai .ai__icons {
  opacity: 1;
  transform: scale(1);
  transition: opacity 226ms ease-out,
    transform 774ms
      linear(
        0, 0.0985, 0.342, 0.6483, 0.9442, 1.1767, 1.3179, 1.364, 1.3302, 1.2427, 1.1314, 1.0233, 0.9377, 0.8853,
        0.8675, 0.8791, 0.9105, 0.9509, 0.9904, 1.0219, 1.0414, 1.0482, 1.0443, 1.033, 1.0183, 1.0039, 0.9923,
        0.9851, 0.9825, 0.9838, 0.9878, 0.9932, 0.9984, 1.0027, 1.0054, 1.0064, 1.0059, 1.0045, 1.0025, 1.0006,
        0.9991, 0.9981, 0.9977, 0.9978, 0.9983, 0.9991, 0.9998, 1.0003, 1.0007, 1.0008, 1
      );
}

.intro.is-ai .ai__icons img {
  transition: transform 213ms cubic-bezier(0.5, 0, 0.5, 1);
}

.intro.is-ai .ai__icons img:nth-child(1) { transform: rotate(-24deg); }
.intro.is-ai .ai__icons img:nth-child(2) { transform: rotate(-16.68deg); }
.intro.is-ai .ai__icons img:nth-child(3) { transform: rotate(16.68deg); }
.intro.is-ai .ai__icons img:nth-child(4) { transform: rotate(24deg); }

/* ---------- Motion ---------- */
@view-transition {
  navigation: auto;
}

.reveal {
  animation: reveal 500ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .reveal {
    animation-name: fade;
    animation-duration: 200ms;
  }

  @keyframes fade {
    from {
      opacity: 0;
    }
  }

  .menu,
  .dropdown[data-open] .menu {
    transform: none;
  }

  .ai__icons,
  .intro.is-ai .ai__icons {
    transform: none;
    transition: opacity 200ms ease;
  }

  .ai__icons img,
  .intro.is-ai .ai__icons img {
    transition: none;
  }

  .ai__icons img:nth-child(1) { transform: rotate(-24deg); }
  .ai__icons img:nth-child(2) { transform: rotate(-16.68deg); }
  .ai__icons img:nth-child(3) { transform: rotate(16.68deg); }
  .ai__icons img:nth-child(4) { transform: rotate(24deg); }

  .pill,
  .pill__chevron {
    transition-property: background-color, border-color;
  }

  .pill:active {
    transform: none;
  }
}

/* ==========================================================
   Long-form case study (getquin)
   Same column, type and spacing as the Finmid page; adds
   section titles, lists and interactive figures.
   ========================================================== */
.rule {
  height: 1px;
  margin: var(--space-section) 0 0;
  border: 0;
  background: var(--line);
}

.prose {
  display: grid;
  gap: 24px;
  line-height: 22.75px;
  color: var(--text-muted);
}

.prose > div {
  display: grid;
  gap: 8px;
}

.prose > .head {
  gap: 2px;
}

.prose p + p {
  margin-top: 8px;
}

.eyebrow {
  color: var(--text-muted);
}

.prose h2 {
  color: var(--text);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

.prose h3 {
  color: var(--text);
  font-weight: 500;
}

.prose h4 {
  margin: 0;
  color: var(--text);
  font-size: inherit;
  font-weight: 400;
}

.prose b,
.prose strong {
  color: var(--text);
  font-weight: 500;
}

.prose ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.prose .bullets {
  padding-left: 21px;
  list-style: disc;
}

.bullets li::marker {
  color: var(--text-faint);
}

/* Check list (Figma slide 2): 20px grey circle with an 11px check */
.prose .checks {
  display: grid;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.checks li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1.4px;
  border-radius: 50%;
  background: #f2f2f2 url("../img/icon-check.svg") center / 11px 11px no-repeat;
}

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 32px;
}

.cols > div {
  display: grid;
  gap: 8px;
  align-content: start;
}

.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Panels (slide visuals) ---------- */
.panel {
  container-type: inline-size;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f5f7;
}

.panel img {
  width: 100%;
}

.panel__body {
  display: grid;
  gap: clamp(14px, 3.4cqw, 28px);
  width: min(100% - 40px, 600px);
  margin-inline: auto;
  padding-block: clamp(32px, 9cqw, 88px);
}

.panel__label {
  color: #787777;
  font-size: clamp(15px, 2.4cqw, 19px);
  text-align: center;
}

.tile {
  --tile-pad: clamp(18px, 4.6cqw, 32px);
  border-radius: clamp(18px, 4cqw, 28px);
  background: #fff;
  box-shadow: 20px 32px 36px rgba(187, 192, 197, 0.36);
  color: #0b121a;
  font-size: clamp(15px, 2.5cqw, 18px);
  line-height: 1.5;
}

.tile__row {
  display: grid;
  grid-template-columns: clamp(34px, 9cqw, 62px) 1fr auto;
  align-items: start;
  gap: 0 8px;
  width: 100%;
  padding: var(--tile-pad);
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.tile__row {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tile__num {
  color: #787777;
}

.tile__title {
  font-weight: 600;
}

.tile__text {
  color: #787777;
}

.tile__chev {
  width: 20px;
  height: 20px;
  margin-top: 0.2em;
  transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
}

.tile--static .tile__row {
  grid-template-columns: clamp(34px, 9cqw, 62px) 1fr;
}

.tile--static .tile__text {
  grid-column: 2;
  margin-top: 4px;
}

/* Accordion: one open at a time, 300ms ease-in-out (Figma smart animate) */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.65, 0, 0.35, 1);
}

.acc__panel > div {
  overflow: hidden;
}

.acc__panel p {
  padding: 6px var(--tile-pad) 0 calc(var(--tile-pad) + clamp(34px, 9cqw, 62px) + 8px);
  color: #787777;
  opacity: 0;
  transition: opacity 200ms ease;
}

[data-accordion] .tile {
  padding-bottom: var(--tile-pad);
}

[data-accordion] .tile__row {
  padding-bottom: 0;
}

.tile[data-open] .acc__panel {
  grid-template-rows: 1fr;
}

.tile[data-open] .acc__panel p {
  opacity: 1;
  transition: opacity 300ms ease 80ms;
}

.tile[data-open] .tile__chev {
  transform: rotate(180deg);
}

.tile--plain {
  padding: var(--tile-pad);
}

.tile--plain h3 {
  margin: 0 0 0.6em;
  font-size: inherit;
  font-weight: 600;
}

.tile--plain ul {
  margin: 0;
  padding-left: 1.3em;
}

.is-positive {
  color: #0e9c63;
}

.is-next {
  color: #d98a2b;
}

/* ---------- Stacked widgets (Why this project mattered) ---------- */
.stack {
  position: relative;
  aspect-ratio: 997 / 1080;
}

.stack__card {
  position: absolute;
  border-radius: 5.6% / 8%;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.stack__card img {
  display: block;
  width: 100%;
  height: 100%;
}

.stack__card--chart { left: 27.88%; top: 9.44%; width: 44.33%; height: 28.61%; }
.stack__card--score { left: 23.17%; top: 26.94%; width: 53.66%; height: 34.63%; }
.stack__card--heat { left: 17.65%; top: 48.8%; width: 64.69%; height: 41.76%; }

/* Entrance (Figma motion): cards fan out from a collapsed stack. */
.js .stack:not(.is-in) .stack__card--heat { transform: translateY(-47.1%) scale(0.94); }
.js .stack:not(.is-in) .stack__card--score { transform: translateY(16.4%) scale(0.9); opacity: 0; }
.js .stack:not(.is-in) .stack__card--chart { transform: translateY(91.7%) scale(0.87); opacity: 0; }

.stack__card--heat { transition: transform 1250ms cubic-bezier(0.22, 1, 0.36, 1) 150ms; }
.stack__card--score { transition: transform 1300ms cubic-bezier(0.22, 1, 0.36, 1) 300ms, opacity 700ms ease 300ms; }
.stack__card--chart { transition: transform 1350ms cubic-bezier(0.22, 1, 0.36, 1) 450ms, opacity 700ms ease 450ms; }

/* ---------- Flow strips (horizontally scrollable phone flows) ---------- */
.flow {
  --flow-h: clamp(360px, 62vw, 600px);
  position: relative;
}

.flow__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 12px;
  background: #f5f5f7;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.flow__scroller::-webkit-scrollbar {
  display: none;
}

.flow__scroller.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.flow__track {
  position: relative;
  height: var(--flow-h);
  aspect-ratio: var(--w) / var(--h);
}

.flow__track img {
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.pin {
  position: absolute;
  left: calc(var(--x) / var(--w) * 100%);
  top: calc(var(--y) / var(--h) * 100%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pin__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #616061;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: transform 160ms var(--ease-out);
}

.pin:active .pin__dot {
  transform: scale(0.94);
}

.pin::before,
.pin::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #ef5343;
  opacity: 0;
  animation: pin-pulse 2400ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.pin::after {
  animation-delay: 1200ms;
}

.pin[aria-expanded="true"]::before,
.pin[aria-expanded="true"]::after {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes pin-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}

.flow__tip {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: min(300px, 100% - 24px);
  padding: 14px 16px 16px;
  border: 1px solid #2b2b2c;
  border-radius: 12px;
  background: rgba(66, 65, 65, 0.8);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  color: #fff;
  line-height: 20px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 110ms ease-out, transform 110ms ease-out, visibility 0s linear 110ms;
}

.flow__tip[data-show] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 170ms var(--ease-out), transform 170ms var(--ease-out), visibility 0s;
}

.flow__tip strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.flow__tip span {
  display: block;
  white-space: pre-line;
  color: rgba(255, 255, 255, 0.86);
}

.flow__hint {
  position: absolute;
  /* starts where the first phone starts (x = 140 in the Figma frame) */
  left: calc(var(--flow-h) * var(--hint-x, 140) / var(--h));
  bottom: calc(var(--flow-h) * 0.0625 - 10px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #344758;
  font-size: 13px;
  line-height: 20px;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.flow__hint i {
  font-style: normal;
  font-weight: 600;
  animation: hint-nudge 800ms ease-out infinite alternate;
}

.flow.is-scrolled .flow__hint {
  opacity: 0;
}

.flow__hint .for-mouse {
  display: none;
}

@keyframes hint-nudge {
  to { transform: translateX(-6px); }
}

@media (hover: hover) and (pointer: fine) {
  .flow__hint .for-touch { display: none; }
  .flow__hint .for-mouse { display: inline; }

  .text-button:hover { text-decoration-thickness: 2px; }
}

/* ---------- Dialog (early rollout funnel data) ---------- */
.dialog {
  width: min(1100px, 100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: clamp(18px, 3vw, 40px);
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #0b121a;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 300ms cubic-bezier(0.65, 0, 0.35, 1), transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.65, 0, 0.35, 1);
}

.dialog.is-open,
.dialog.is-open::backdrop {
  opacity: 1;
  transform: none;
  transition-duration: 400ms;
}

.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(14px, 2.4vw, 28px);
}

.dialog__head h2 {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
}

.dialog__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}

.dialog__close:active {
  transform: scale(0.94);
}

.dialog img {
  width: 100%;
  border-radius: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .dialog__close:hover { background: var(--surface); }
}

/* ---------- Scroll reveal for figures ---------- */
.js .rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 700ms var(--ease-out);
}

.js .rise.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .stack:not(.is-in) .stack__card,
  .js .rise {
    transform: none;
    opacity: 1;
  }

  .stack__card,
  .acc__panel,
  .tile__chev,
  .dialog,
  .flow__tip,
  .flow__tip[data-show] {
    transition-duration: 1ms;
    transform: none;
  }

  .tile[data-open] .tile__chev {
    transform: rotate(180deg);
  }

  .pin::before,
  .pin::after,
  .flow__hint i {
    animation: none;
  }
}

/* ==========================================================
   Wealth Management case study additions
   ========================================================== */

/* Floating plan widgets (Why this project mattered) */
.wstack {
  position: relative;
  aspect-ratio: 997 / 1080;
}

.wstack img {
  position: absolute;
  max-width: none;
  border-radius: 1.2cqw;
}

.wstack .wstack__plan {
  left: 22.07%;
  top: 26.48%;
  width: 60.48%;
  box-shadow: 0 4cqw 12cqw rgba(16, 16, 18, 0.22);
  transition: transform 626ms cubic-bezier(0.16, 1, 0.3, 1), opacity 626ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wstack .wstack__goal {
  box-shadow: 0 2.4cqw 7cqw rgba(16, 16, 18, 0.3);
  transition: transform 860ms cubic-bezier(0.22, 1, 0.36, 1) 500ms, opacity 860ms cubic-bezier(0.22, 1, 0.36, 1) 500ms;
}

.wstack .wstack__goal--retirement { left: 14.54%; top: 15.19%; width: 24.67%; }
.wstack .wstack__goal--house { left: 64.49%; top: 67.13%; width: 20.76%; }

.js .wstack:not(.is-in) .wstack__plan { opacity: 0; transform: scale(0.96); }
.js .wstack:not(.is-in) .wstack__goal--retirement { opacity: 0; transform: translate(-12px, -24px) scale(0.96); }
.js .wstack:not(.is-in) .wstack__goal--house { opacity: 0; transform: translate(12px, 24px) scale(0.96); }

/* Result tiles (Impact) — staggered entrance, 0.7s each, 0.5s apart */
.stat {
  padding: var(--tile-pad);
}

.stat__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.7em;
  font-size: 1.1em;
  font-weight: 600;
}

.stat__value {
  color: #3fb866;
  font-variant-numeric: tabular-nums;
}

.stat p + p {
  margin-top: 0.55em;
  color: #787777;
}

.stagger > * {
  transition: transform 710ms cubic-bezier(0.16, 1, 0.3, 1), opacity 710ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--n, 0) * 500ms);
}

.js .stagger:not(.is-in) > * {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .js .wstack:not(.is-in) img,
  .js .stagger:not(.is-in) > * {
    opacity: 1;
    transform: none;
  }

  .wstack img,
  .stagger > * {
    transition: none;
  }
}

/* ---------- Research tool tiles: staggered pop-in, then a slow idle float ---------- */
.tools {
  position: relative;
  aspect-ratio: 997 / 720;
}

.tools__tile {
  position: absolute;
  left: calc(var(--x) / 997 * 100%);
  top: calc(var(--y) / 720 * 100%);
  display: grid;
  place-items: center;
  width: 22.07%;
  aspect-ratio: 1;
  border-radius: 18%;
  background: #fff;
  box-shadow: 0 2.6cqw 5.2cqw rgba(187, 192, 197, 0.38);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--n, 0) * 90ms);
}

.tools .tools__tile img {
  width: 41.8%;
  height: auto;
}

.js .tools:not(.is-in) .tools__tile {
  opacity: 0;
  transform: translateY(16px) scale(0.92);
}

/* The float moves the icon and tile together but only by a few pixels. */
.tools.is-in .tools__tile {
  animation: tool-float var(--float, 6s) ease-in-out calc(900ms + var(--n, 0) * 400ms) infinite alternate;
}

@keyframes tool-float {
  from { translate: 0 0; }
  to { translate: 0 -1.1cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .js .tools:not(.is-in) .tools__tile {
    opacity: 1;
    transform: none;
  }

  .tools__tile,
  .tools.is-in .tools__tile {
    transition: none;
    animation: none;
  }
}