/* Zhenai Advisory hero — scoped styles, extracted from the hero export.
   Every selector, keyframe and custom property is prefixed zha- and the
   block sets its own box-sizing/font inside .zha-hero, so nothing here
   reaches the rest of the site. Loaded after style.css on /, /fr/, /cn/. */

/* ---- keyframes (global by necessity, prefixed) ---- */
@keyframes zha-draw { from { stroke-dashoffset: var(--zha-len, 1000); } to { stroke-dashoffset: 0; } }
@keyframes zha-settle { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
@keyframes zha-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* city name / blurb: drifts down out of the dot instead of snapping in */
@keyframes zha-drop { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: translateY(0); } }

/* ---- hero shell ---- */
.zha-hero {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: radial-gradient(128% 106% at 50% 18%, #E24A50 0%, #D8353F 12%, #C82936 24%, #B41E2C 38%, #971524 52%, #7A1020 66%, #5E0B17 80%, #470811 91%, #380610 100%);
  color: #F7F2E8;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.zha-hero *, .zha-hero *::before, .zha-hero *::after { box-sizing: border-box; }

/* film grain over the gradient */
.zha-hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background-size: 230px 230px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='zhaGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23zhaGrain)'/%3E%3C/svg%3E");
}

/* world map + flight arc */
.zha-hero__map {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 72%;
  pointer-events: none;
}
.zha-hero__coast--lo {
  filter: blur(2.6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 42%, #000 56%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 42%, #000 56%, #000 100%);
}
.zha-hero__coast--hi {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 56%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 56%);
}

/* ivory curve that hands off to the next section */
.zha-hero__curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(48px, 7vw, 92px);
  display: block;
}

/* ---- content ---- */
.zha-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(300px, 42svh, 430px) clamp(24px, 5vw, 80px) clamp(50px, 6vh, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.72fr);
  gap: clamp(28px, 3.6vw, 52px);
  align-items: start;
}
.zha-hero__lead { display: flex; flex-direction: column; align-items: flex-start; }
.zha-hero__title {
  /* Georgia, declared explicitly. This is the face the hero has always
     actually rendered in, and the one that was signed off. */
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(30px, 3.55vw, 50px);
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: #F7F2E8;
  margin: 0 0 clamp(48px, 5.5vw, 78px);
  text-wrap: pretty;
}
.zha-hero__line { display: block; opacity: 0; }
.zha-hero__line--1 { animation: zha-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards; }
/* a little more air between the two lines only — margin rather than
   line-height, so leading inside a wrapped line is untouched */
.zha-hero__line--2 { margin-top: 0.16em; }
.zha-hero__line--2 { animation: zha-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.95s forwards; }

.zha-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 320px);
  min-height: 54px;
  padding: 17px 34px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #7A1120;
  background: #F7F2E8;
  border: none;
  transition: background 0.2s, color 0.2s;
  opacity: 0;
  animation: zha-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.38s forwards;
}
.zha-hero__cta:hover, .zha-hero__cta:focus-visible { background: #E9DDC6; color: #6B0F1C; }

.zha-hero__triad {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 0;
}
.zha-hero__rule {
  position: absolute;
  left: calc(-1 * clamp(14px, 1.8vw, 26px));
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(247, 242, 232, 0.20);
}
.zha-hero__triad-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
  opacity: 0;
  animation: zha-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.46s forwards;
}
.zha-hero__triad-item {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.3;
  white-space: nowrap;
  text-transform: uppercase;
  color: #F7F2E8;
}

/* ---- responsive ---- */
@media (max-width: 880px) {
  .zha-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .zha-hero__rule { display: none; }
  .zha-hero__triad { align-self: start; }
}
@media (max-width: 640px) {
  /* the coastlines used to be hidden here because the sliced viewBox did not
     contain Montreal; the script now scales the map to the city span instead */
  .zha-hero__cta { width: 100%; }
  .zha-hero__triad { align-self: end; }
  .zha-hero__triad-list { align-items: flex-end; }
  .zha-hero__triad-item { text-align: right; }
  /* Reclaim room below the triad from the lower block itself. Easing the top
     padding would be the obvious lever, but it steals the band the map
     annotation needs above the headline and forces the labels to shrink. */
  /* air above and below the CTA, scaled to the viewport: taller phones have
     room to spare over the rail, the shortest ones do not. Only the lower
     block moves, so the map band above the headline is untouched. */
  .zha-hero__title { margin-bottom: clamp(32px, 5vh, 50px); }
  .zha-hero__inner { gap: clamp(26px, 4vh, 42px); }
  .zha-hero__cta { min-height: 48px; padding: 14px 28px; }
  /* only the shortest screens reach this floor; 42svh still governs from
     about 712px up, so taller phones keep their current proportions */
  .zha-hero__inner { padding-top: clamp(272px, 42svh, 430px); }
  .zha-hero__triad, .zha-hero__triad-list { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .zha-hero__line,
  .zha-hero__cta,
  .zha-hero__triad-list { animation: none; opacity: 1; transform: none; }
  .zha-hero__arc { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ---- integration: CJK pages -------------------------------------------
   Poppins and the display serif carry no CJK glyphs. On /cn/ fall back to the
   same Chinese faces the rest of that page already uses, so the hero does
   not render Chinese in a system default that clashes with the page. */
.zha-hero:lang(zh) {
  font-family: 'Poppins', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
}
.zha-hero:lang(zh) .zha-hero__cta {
  /* the CTA declares its own stack, so it needs the CJK face naming too */
  font-family: 'Poppins', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
}
.zha-hero:lang(zh) .zha-hero__title {
  font-family: 'Noto Serif SC', 'Songti SC', Georgia, serif;
}