/* =====================================================================
   EM Advisory — scroll-assembled hero logo (build v1)
   One CSS block for Webflow: paste into Site settings > Custom code
   (head) or an Embed, inside <style>…</style>.
   All classes are prefixed `ema-`. State classes live on <html>:
     .ema-anim    animated (desktop, motion allowed)
     .ema-static  static fallback (mobile < 768px or reduced motion)
     .ema-done    the sequence has finished this visit
   ===================================================================== */

:root {
  --ema-bg: #f7f7f7;
  --ema-ink: #000;
  --ema-muted: #7d7d7d;
  --ema-nav-h: 76px;
  --ema-nav-logo-h: 38px;       /* the mark lands at this height in the nav */
}

/* -------------------------------------------------- nav (placeholder) */
.ema-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--ema-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 3.4vw, 48px);
  background: transparent;
  transition: background-color .4s ease, box-shadow .4s ease;
}
.ema-done .ema-nav,
.ema-static .ema-nav {
  background: rgba(247, 247, 247, .94);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.ema-nav__brand {
  display: block;
  line-height: 0;
  color: var(--ema-ink);
}
/* the landing slot for the animated mark: the real SVG logo sits in it */
.ema-nav__logo {
  display: block;
  height: var(--ema-nav-logo-h);
  width: calc(var(--ema-nav-logo-h) * 542 / 266);
}
.ema-anim:not(.ema-done) .ema-nav__logo { visibility: hidden; }
.ema-nav__links {
  display: flex;
  gap: clamp(16px, 2.4vw, 36px);
  font: 400 15px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.ema-nav__links a { color: var(--ema-ink); text-decoration: none; }
.ema-anim:not(.ema-done) .ema-nav__links { opacity: 0; }  /* JS fades it in at hand-off */

/* -------------------------------------------------- hero section */
.ema-hero {
  position: relative;
  background: var(--ema-bg);
  color: var(--ema-ink);
}
/* animated: the section is the scroll track, the stage sticks */
.ema-anim .ema-hero { height: 520vh; }
.ema-anim .ema-hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.ema-done .ema-hero { display: none; }

.ema-hero__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* everything inside the canvas is authored in design px (1280×741,
   the Figma frame) and scaled to fit by JS (sets transform: scale()) */
.ema-hero__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1280px;
  height: 741px;
  margin: -370.5px 0 0 -640px;
  transform-origin: 50% 50%;
}
.ema-hero__type {
  position: absolute;
  inset: 0;
  width: 1280px;
  height: 741px;
  overflow: visible;
  z-index: 0;
}
.ema-hero__line { will-change: transform, opacity; }

/* the mark: a 542×266 box at its final spot, the 14 rects inside it */
.ema-hero__logo {
  position: absolute;
  left: 368px;
  top: 238px;
  width: 542px;
  height: 266px;
  z-index: 2;
  transform-origin: 0 0;
}
.ema-hero__piece {
  position: absolute;
  background: var(--ema-ink);
  will-change: transform;
  backface-visibility: hidden;
}

/* figures: JS wraps each <img> in .ema-fig > .ema-fig__flip */
.ema-fig {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.ema-fig__flip,
.ema-fig__walker {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
}
.ema-fig__flip { transform-origin: 50% 50%; }
.ema-fig img,
.ema-hero__fig { display: block; width: 100%; height: 100%; }
.ema-fig__part {
  position: absolute;
  left: 0; top: 0;
  background-repeat: no-repeat;
  will-change: transform;
}

.ema-hero__hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  font: 400 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #999;
  z-index: 5;
  pointer-events: none;
}
.ema-static .ema-hero__hint { display: none; }

/* static fallback: the hero is a plain block under the nav */
.ema-static .ema-hero { padding-top: var(--ema-nav-h); }
.ema-static .ema-hero__stage { height: 741px; } /* JS sets the real height */

/* -------------------------------------------------- homepage (placeholder) */
.ema-home {
  background: var(--ema-bg);
  color: var(--ema-ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.ema-anim:not(.ema-done) .ema-home { display: none; }
.ema-done .ema-home { padding-top: var(--ema-nav-h); }
.ema-home__section {
  padding: clamp(56px, 9vw, 120px) clamp(20px, 6vw, 96px);
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.ema-home__section:first-child { border-top: 0; }
.ema-home__eyebrow {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #888; margin: 0 0 16px;
}
.ema-home__title {
  font-weight: 300; font-size: clamp(32px, 5.2vw, 76px); line-height: 1.02;
  letter-spacing: -.03em; margin: 0 0 24px; max-width: 16ch;
}
.ema-home__text { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6; color: #333; max-width: 60ch; margin: 0; }
.ema-home__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 40px;
}
.ema-home__card { background: #fff; padding: 28px; min-height: 160px; }
.ema-home__card h3 { font-weight: 400; font-size: 20px; margin: 0 0 10px; }
.ema-home__card p { margin: 0; color: #555; line-height: 1.5; font-size: 15px; }

@media (max-width: 767px) {
  :root { --ema-nav-h: 60px; --ema-nav-logo-h: 30px; }
  .ema-nav__links { display: none; }
}