/* c2 REFRACTION: homepage layer (hero, glass stack, entangled pair, paths). */
#field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
.gl-on #field { opacity: 1; }
main { position: relative; z-index: 1; }

/* ---- hero ---- */
.hero { position: relative; min-height: min(calc(100vh - 76px), 900px); display: flex; align-items: center; padding: 40px 0 72px; overflow: hidden; }
.hero-poster {
  position: absolute; inset: 0; z-index: -1; transition: opacity 1.4s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent);
  background:
    radial-gradient(60vw 50vw at 78vw 46vh, rgba(255, 255, 255, .9), transparent 40vw),
    linear-gradient(118deg, transparent 46%, rgba(160, 223, 242, 0.27) 52%, rgba(176, 151, 243, 0.22) 57%, rgba(231, 161, 197, 0.22) 62%, rgba(245, 203, 218, 0.24) 67%, rgba(175, 226, 242, 0.16) 71%, transparent 77%),
    radial-gradient(50vw 40vw at 10vw 90vh, rgba(176, 151, 243, 0.07), transparent 40vw),
    linear-gradient(180deg, var(--pearl-2), var(--pearl));
}
.gl-on .hero-poster { opacity: 0; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font: 400 clamp(56px, 7.4vw, 112px)/.94 var(--serif); letter-spacing: -.02em; margin: 0 0 26px; }
.hero h1 em { display: block; }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 30em; margin: 0 0 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.explore { display: inline-block; margin-top: 30px; font: 500 15px/1 var(--sans); color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); }

/* ---- glass stack ---- */
.stack { position: relative; aspect-ratio: 1 / 1.02; perspective: 1400px; transform-style: preserve-3d; }
.slab {
  position: absolute; border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .18) 55%, rgba(255, 255, 255, .42));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 1px 0 #fff, 0 40px 80px -40px rgba(50, 60, 100, .35);
  backdrop-filter: blur(3px) saturate(1.5); -webkit-backdrop-filter: blur(3px) saturate(1.5);
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.slab::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--a, 200deg), #7FD6F2, #B49CF8, #EBB3CF, #B49CF8, #7FD6F2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9;
}
.slab-1 { inset: 4% 22% 30% 2%; transform: translateZ(-120px) rotate(-6deg); }
.slab-2 { inset: 26% 0 6% 34%; transform: translateZ(-60px) rotate(5deg); }
.slab-3 { inset: 12% 8% 12% 10%; transform: translateZ(0); }
.gl-on .slab { background: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .16)); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* split into a path */
.stack.split-a .slab-1 { transform: translate3d(-34vw, -6vh, -200px) rotate(-14deg); opacity: 0; }
.stack.split-a .slab-2 { transform: translate3d(30vw, 20vh, -160px) rotate(16deg); opacity: 0; }
.stack.split-a .slab-3 { transform: translate3d(-8vw, 0, 140px) rotate(-3deg); }
.stack.split-b .slab-1 { transform: translate3d(-30vw, -20vh, -200px) rotate(-16deg); opacity: 0; }
.stack.split-b .slab-2 { transform: translate3d(34vw, 6vh, -160px) rotate(14deg); opacity: 0; }
.stack.split-b .slab-3 { transform: translate3d(8vw, 0, 140px) rotate(3deg); }

/* ---- thread ---- */
.thread, .card-thread, .splash-thread { overflow: visible; }
.thread { position: absolute; inset: 0; width: 100%; height: 100%; }
.thread-base { fill: none; stroke: url(#th-g); stroke-width: 2.2; vector-effect: non-scaling-stroke; opacity: .8; stroke-linecap: round; }
.thread-pulse { fill: none; stroke: #fff; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 4px #C6B5F6); }
.js .motion .thread-pulse { opacity: .95; animation: travel 3.6s linear infinite; }
.pulse-ab .thread-pulse { animation-duration: 1.1s !important; }
.pulse-ba .thread-pulse { animation-direction: reverse !important; animation-duration: 1.1s !important; }
@keyframes travel { to { stroke-dashoffset: -100; } }

/* ---- particles (entangled pair) ---- */
.particle { position: absolute; display: grid; justify-items: center; text-align: center; gap: 4px; text-decoration: none; color: var(--ink); width: 12em; transform: translate(-50%, -32px); }
.p-a { left: 26%; inset-block-start: 30%; }
.p-b { left: 74%; inset-block-start: 66%; }
.particle .orb, .choice .orb { margin-bottom: 8px; }
.orb {
  position: relative; display: block; width: 64px; height: 64px; border-radius: 999px;
  background: radial-gradient(circle at 36% 32%, #FFFFFF 0 18%, #F2F4FA 30%, rgba(214, 220, 236, .9) 62%, rgba(198, 181, 246, 0.43) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 30px 6px rgba(160, 223, 242, 0.32), 0 0 70px 18px rgba(198, 181, 246, 0.18), 0 14px 24px -10px rgba(50, 60, 100, .45);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
[data-particle="b"] .orb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 30px 6px rgba(245, 197, 216, 0.36), 0 0 70px 18px rgba(245, 203, 218, 0.22), 0 14px 24px -10px rgba(50, 60, 100, .45); }
.spin { position: absolute; inset: -9px; border-radius: 999px; border: 1.5px solid transparent; border-top-color: rgba(29, 33, 38, .55); border-right-color: rgba(29, 33, 38, .15); transition: transform .8s var(--ease); }
[data-particle="b"] .spin { transform: rotate(180deg); }
.js .motion .spin { animation: spin 6s linear infinite; }
[data-particle="b"] .spin { animation-direction: reverse !important; }
@keyframes spin { to { rotate: 360deg; } }
.p-label { font: 400 30px/1.05 var(--serif); }
.p-sub { font-size: 14.5px; color: var(--ink-2); }
.hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; margin: 0; font: 500 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* touch one, the other answers */
.is-touched .orb { transform: scale(1.14); }
.is-touched .spin { border-top-color: var(--ink); }
.is-echo .orb { transform: scale(1.1); box-shadow: 0 0 0 2px #fff, 0 0 40px 12px rgba(176, 151, 243, 0.43), 0 0 90px 30px rgba(160, 223, 242, 0.25); }
.is-echo .spin { transform: rotate(180deg) scale(1.15); border-top-color: var(--violet); }
[data-particle="b"].is-echo .spin { transform: rotate(0deg) scale(1.15); }

/* ---- paths ---- */
.paths { position: relative; padding: 112px 0 128px; }
.paths h2 { font: 400 clamp(44px, 5.2vw, 76px)/1 var(--serif); letter-spacing: -.015em; margin: 0 0 56px; max-width: 14em; }
.cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.card-thread { position: absolute; left: 40%; width: 20%; inset-block-start: 96px; height: 30px; z-index: 0; }
.card {
  position: relative; z-index: 1; padding: 44px 44px 40px; border-radius: 30px;
  /* frosted, not see-through: the lattice behind reads as a soft glow, never as lines over the copy (David 11-12) */
  background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .84));
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 50px 90px -50px rgba(50, 60, 100, .4);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.card > * { transition: opacity .8s var(--ease); }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 210deg, #7FD6F2, #B49CF8, #EBB3CF, #B49CF8, #7FD6F2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; pointer-events: none;
}
.card:focus { outline: none; }
.card-orb { display: block; width: 44px; height: 44px; border-radius: 999px; margin-bottom: 26px;
  background: radial-gradient(circle at 36% 32%, #fff 0 20%, #E9ECF5 40%, rgba(198, 181, 246, 0.5) 100%);
  box-shadow: 0 0 0 1px #fff, 0 0 26px 6px rgba(160, 223, 242, 0.32); }
.orb-b { box-shadow: 0 0 0 1px #fff, 0 0 26px 6px rgba(245, 197, 216, 0.36); }
.card-kicker { font: 600 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.card h3 { font: 400 clamp(34px, 3.2vw, 46px)/1.04 var(--serif); margin: 0 0 16px; }
.card p { color: var(--ink-2); margin: 0 0 22px; }
.services { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.services li { font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .12); }
.card-cta { display: flex; flex-wrap: wrap; gap: 10px; }
/* the other path recedes by its CONTENT fading, so the card itself stays opaque glass over the lattice */
.paths[data-active] .card { transform: scale(.97); }
.paths[data-active] .card > * { opacity: .6; }
.paths[data-active="advisors"] #advisors > *,
.paths[data-active="clients"] #clients > * { opacity: 1; }
.paths[data-active="advisors"] #advisors,
.paths[data-active="clients"] #clients { opacity: 1; transform: scale(1.015); box-shadow: inset 0 0 0 1px #fff, 0 0 0 6px rgba(198, 181, 246, 0.13), 0 60px 100px -50px rgba(50, 60, 100, .5); }

/* ---- motion-only reveal (JS + motion only, content visible otherwise) ---- */
.js .motion .hero-copy > * { animation: rise 1s var(--ease) both; }
.js .motion .hero-copy > *:nth-child(2) { animation-delay: .08s; }
.js .motion .hero-copy > *:nth-child(3) { animation-delay: .16s; }
.js .motion .hero-copy > *:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { transform: translateY(14px); } }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 200deg; }
.js .motion .slab::before { animation: hue 14s linear infinite; }
@keyframes hue { to { --a: 560deg; } }
.js .motion .mk-c { animation: disp 7s ease-in-out infinite; }
.js .motion .mk-m { animation: disp 7s ease-in-out infinite reverse; }
@keyframes disp { 50% { transform: translate(0, 0); } }
.js .motion .mk-sheen { animation: sheen 7s var(--ease) infinite; }
@keyframes sheen { 0%, 60% { transform: translate(-14px, 0); opacity: 0; } 75% { opacity: .7; } 100% { transform: translate(52px, 0); opacity: 0; } }

/* ---- phone: refraction simplified (no WebGL, no backdrop on slabs) ---- */
@media (max-width: 760px) {
  .hero { min-height: auto; padding: 28px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: clamp(48px, 14vw, 64px); margin-bottom: 18px; }
  .lede { font-size: 17px; margin-bottom: 24px; }
  .cta-row .btn { flex: 1 1 140px; }
  .explore { margin-top: 18px; }
  /* fix round 1 (engineering MINOR, tap targets): the HIT AREA of Explore (68x40) grows to 44 px tall through an
     empty, unpainted ::after, as the shell does it (D13); nothing drawn changes */
  .explore { position: relative; }
  .explore::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }
  .stack { aspect-ratio: 1 / .92; perspective: none; }
  .slab { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .particle { width: 9.5em; }
  .p-label { font-size: 24px; }
  .p-sub { font-size: 13px; }
  .orb { width: 48px; height: 48px; }
  .particle { transform: translate(-50%, -24px); }
  .hint { display: none; }
  .paths { padding: 72px 0 80px; }
  .paths h2 { margin-bottom: 32px; }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card-thread { display: none; }
  .card { padding: 30px 24px 28px; }
  .js .motion .slab::before { animation: none; }
}