/* ==========================================================================
   NorthStar Insights — Our Story page
   Builds on css/styles.css (tokens, grid, type, CTA, reveal, header, Engine,
   footer). Desktop values are in --u design pixels of the 1440 frame.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Introduction + editorial blocks
   -------------------------------------------------------------------------- */
.story-intro { padding-top: calc(193 * var(--u)); text-align: center; }
.story-title {
  font-size: calc(64 * var(--u));
  line-height: calc(76 * var(--u));
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--burgundy);
}
.story-block__title {
  font-size: calc(40 * var(--u));
  line-height: calc(50 * var(--u));
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--burgundy);
}
.story-block__title--small { font-size: calc(28 * var(--u)); line-height: calc(36 * var(--u)); }
.story-block__body {
  max-width: calc(1080 * var(--u));
  margin: calc(14 * var(--u)) auto 0;
  font-size: calc(28 * var(--u));
  line-height: calc(39 * var(--u));
  font-weight: 400;
  color: var(--ink);
}
.story-block--lead { margin-top: calc(56 * var(--u)); }
/* Each text box keeps its own Figma width so lines break as designed */
.story-block--lead .story-block__body { max-width: calc(1000 * var(--u)); }
.story-block--fixed .story-block__body { max-width: calc(1024 * var(--u)); }
.story-block--way .story-block__body { max-width: calc(1070 * var(--u)); }
.story-block--promise .story-block__body { max-width: calc(1080 * var(--u)); }
.story-block--lead .story-block__body { margin-top: calc(12 * var(--u)); }
.story-block--fixed { margin-top: calc(144 * var(--u)); }
.story-block--fixed .story-block__body { margin-top: calc(9 * var(--u)); }
.story-block--way { margin-top: calc(90 * var(--u)); }
.story-block--promise { margin-top: calc(100 * var(--u)); }


/* --------------------------------------------------------------------------
   Note From Our Founder — one image, quote set over the right-hand side
   (the supplied photograph already carries the burgundy wash on that side)
   -------------------------------------------------------------------------- */
.founder { padding-top: calc(120 * var(--u)); }
.founder__title {
  text-align: center;
  font-size: calc(62 * var(--u));
  line-height: calc(76 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--burgundy);
}
.founder__figure {
  position: relative;
  margin: calc(45 * var(--u)) 0 0;
  aspect-ratio: 1300 / 726;
  overflow: hidden;
  background: #e9dcdc;
}
.founder__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 30%; }
.founder__quote {
  position: absolute;
  left: calc(660 * var(--u)); right: calc(87.5 * var(--u)); top: calc(110 * var(--u));
  margin: 0;
  color: var(--white);
}
.founder__quote p {
  font-size: calc(32 * var(--u));
  line-height: calc(45 * var(--u));
  font-weight: 400;
  letter-spacing: -0.005em;
}
.founder__mark { position: relative; font-size: 1.15em; line-height: 0; font-weight: 600; }
.founder__mark--open { top: -0.55em; margin-right: 0.08em; }
.founder__mark--close { top: -0.25em; margin-left: 0.06em; }
.founder__cite {
  display: block;
  margin-top: calc(41 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: 1.3;
  font-weight: 300;
}
.founder__cite strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   Onward CTA
   -------------------------------------------------------------------------- */
/* Contextual link onward to Our Services */
.story-cta { margin-top: calc(72 * var(--u)); }

/* --------------------------------------------------------------------------
   The Hubs — interactive office map
   The map canvas covers lon −180…180 / lat 84…−58 (Miller). Each breakpoint
   chooses which window of it is visible:
     --lon0  left-edge longitude      --span  degrees of longitude across
     --top / --bot  Miller y (deg) of the top and bottom edges
   -------------------------------------------------------------------------- */
.hubs { padding-top: calc(118 * var(--u)); }
.hubs__intro { margin: calc(16 * var(--u)) auto 0; max-width: calc(1170 * var(--u)); }

.hubs__stage {
  position: relative;
  max-width: 1440px;
  margin: calc(-17 * var(--u)) auto 0;
}
.hub-map {
  --lon0: -185.02; --span: 392.4; --top: 114.684; --bot: -65.63;
  position: relative;
  overflow: hidden;
}
.hub-map::before {
  content: ""; display: block;
  padding-top: calc(100% * (var(--top) - var(--bot)) / var(--span));
}
.hub-map__canvas {
  position: absolute; top: 0;
  left: calc(-100% * (var(--lon0) + 180) / var(--span));
  width: calc(100% * 360 / var(--span));
  margin-top: calc(-100% * (114.684 - var(--top)) / var(--span));
  aspect-ratio: 360 / 180.313;
}
.hub-map__land {
  display: block; width: 100%; height: 100%;
  /* Fade out the western hemisphere behind the city copy, as in the design */
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 53%);
  mask-image: linear-gradient(90deg, transparent 34%, #000 53%);
  pointer-events: none;
  user-select: none;
}
.hub-map__markers { position: absolute; inset: 0; }

.hub-marker {
  position: absolute;
  display: grid; place-items: center;
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  min-width: 26px; min-height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
}
.hub-marker__icon {
  width: calc(20 * var(--u)); height: calc(20 * var(--u));
  min-width: 18px; min-height: 18px;
  transform: scale(1);
  transition: transform .45s var(--ease-out);
}
.hub-marker:hover .hub-marker__icon,
.hub-marker:focus-visible .hub-marker__icon { transform: scale(1.6); }
.hub-marker.is-active .hub-marker__icon { transform: scale(1.35); }
.hub-marker.is-active:hover .hub-marker__icon { transform: scale(1.6); }
.hub-marker:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }

/* City copy — stacked in one cell so switching never moves the layout */
.hubs__panel-wrap { position: absolute; top: calc(196 * var(--u)); left: 0; right: 0; pointer-events: none; }
@media (min-width: 1440px) { .hubs__panel-wrap { padding-inline: 70px; } }
.hubs__panels { display: grid; width: calc(530 * var(--u)); margin-left: calc(6 * var(--u)); pointer-events: auto; }
.hub-panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(calc(-14 * var(--u)));
  visibility: hidden;
  transition: opacity var(--dissolve), transform .6s var(--ease-out), visibility 0s linear .6s;
}
.hub-panel.is-active {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--dissolve), transform .6s var(--ease-out), visibility 0s;
}
.hub-panel__city {
  font-size: calc(41 * var(--u));
  line-height: calc(56 * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--burgundy);
}
.hub-panel__text {
  margin-top: calc(4 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(34 * var(--u));
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Our Reach — three independent accordions
   -------------------------------------------------------------------------- */
.reach { padding-top: calc(8 * var(--u)); padding-bottom: calc(200 * var(--u)); }
.reach__title {
  font-size: calc(40 * var(--u));
  line-height: calc(50 * var(--u));
  font-weight: 500;
  color: var(--burgundy);
}
.reach__intro { margin: calc(20 * var(--u)) auto 0; max-width: calc(1284 * var(--u)); }

.reach__regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(30 * var(--u));
  align-items: start;
  margin-top: calc(50 * var(--u));
}
.region__heading { margin: 0; }
.region__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u));
  text-align: left;
  color: var(--burgundy);
}
.region__name {
  position: relative;
  font-size: calc(28 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 600;
}
.region__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.region__trigger:hover .region__name::after, .region__trigger:focus-visible .region__name::after { transform: scaleX(1); }
.region__chevron {
  flex: none;
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  fill: none; stroke: var(--ink); stroke-width: 2.4;
  transition: transform .5s var(--ease-out);
}
.region.is-open .region__chevron { transform: rotate(180deg); }

/* Height animates via grid rows (0fr → 1fr); entries fade in with a small stagger */
.region__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.region.is-open .region__panel { grid-template-rows: 1fr; }
.region__inner { overflow: hidden; min-height: 0; }
.region__list {
  width: calc(310 * var(--u));
  padding: calc(14 * var(--u)) 0 calc(22 * var(--u)) calc(2 * var(--u));
  border-bottom: 1px solid rgba(0, 0, 0, .55);
}
.region__item {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(49 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.2;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.region.is-open .region__item {
  opacity: 1; transform: none;
  transition: opacity .45s ease calc(var(--i) * 45ms + 120ms), transform .5s var(--ease-out) calc(var(--i) * 45ms + 120ms);
}
.region__flag { flex: none; width: calc(41 * var(--u)); height: calc(21 * var(--u)); min-width: 30px; min-height: 15px; object-fit: cover; }

/* ==========================================================================
   Tablet (≤1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  .story-intro { padding-top: 140px; }
  .story-title { font-size: 48px; line-height: 58px; }
  .story-block__title { font-size: 32px; line-height: 40px; }
  .story-block__title--small { font-size: 24px; line-height: 32px; }
  .story-block__body { font-size: 22px; line-height: 32px; margin-top: 12px; }
  .story-block--lead { margin-top: 64px; }
  .story-block--fixed, .story-block--way, .story-block--promise { margin-top: 88px; }

  .founder { padding-top: 96px; }
  .founder__title { font-size: 44px; line-height: 54px; }
  .founder__figure { margin-top: 40px; }
  .founder__quote { left: 50%; right: 32px; top: 36px; }
  .founder__quote p { font-size: 20px; line-height: 29px; }
  .founder__cite { font-size: 18px; margin-top: 18px; }

  .story-cta { margin-top: 56px; }

  .hubs { padding-top: 104px; }
  /* Re-frame the map on Europe → India so the four markers stay apart */
  .hubs__stage { margin-top: 32px; }
  .hub-map { --lon0: -25; --span: 125; --top: 77.9; --bot: -2; }
  .hub-map__land { -webkit-mask-image: none; mask-image: none; }
  .hubs__panel-wrap { position: relative; top: auto; margin-top: 32px; }
  .hubs__panels { width: auto; margin-left: 0; }
  .hub-panel__city { font-size: 36px; line-height: 44px; }
  .hub-panel__text { font-size: 19px; line-height: 28px; }

  .reach { padding-top: 104px; padding-bottom: 140px; }
  .reach__title { font-size: 40px; line-height: 50px; }
  .reach__regions { grid-template-columns: 1fr; row-gap: 8px; margin-top: 40px; }
  .region { border-bottom: 1px solid rgba(80, 5, 35, .18); }
  .region__trigger { padding: 16px 2px; }
  .region__name { font-size: 24px; line-height: 32px; }
  .region__chevron { width: 26px; height: 26px; }
  .region__list { width: auto; border-bottom: 0; padding: 4px 0 20px 2px; }
  .region__item { height: 44px; font-size: 18px; gap: 12px; }
}

/* ==========================================================================
   Mobile (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
  .story-intro { padding-top: 116px; }
  .story-title { font-size: 40px; line-height: 48px; }
  .story-block__title { font-size: 26px; line-height: 33px; }
  .story-block__title--small { font-size: 21px; line-height: 28px; }
  .story-block__body { font-size: 18px; line-height: 27px; }
  .story-block__body br { display: none; }
  .story-block--lead { margin-top: 48px; }
  .story-block--fixed, .story-block--way, .story-block--promise { margin-top: 64px; }

  .founder { padding-top: 80px; }
  .founder__title { font-size: 32px; line-height: 40px; }
  /* Photo keeps its composition on top; a burgundy wash carries the quote below it */
  .founder__figure { aspect-ratio: auto; display: flex; flex-direction: column; background: #5a1d33; }
  /* Square crop keeps the founder whole; the fade starts at the photo's lower edge */
  .founder__img { position: relative; inset: auto; height: auto; aspect-ratio: 1 / 1; object-position: 6% 40%; }
  .founder__figure::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(100vw - 2 * var(--margin) - 140px); height: 140px;
    background: linear-gradient(180deg, rgba(90, 29, 51, 0), #5a1d33 92%); pointer-events: none;
  }
  .founder__quote { position: relative; z-index: 1; left: auto; right: auto; top: auto; margin-top: -36px; padding: 0 22px 32px; }
  .founder__quote p { font-size: 19px; line-height: 28px; }
  .founder__cite { font-size: 16px; }

  .story-cta { margin-top: 44px; }

  .hubs { padding-top: 88px; }
  .hub-map { --lon0: -12; --span: 104; --top: 71.6; --bot: 2; }
  .hub-marker { width: 28px; height: 28px; }

  .reach { padding-top: 88px; padding-bottom: 104px; }
  .reach__title { font-size: 34px; line-height: 42px; }
  .region__item { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-panel, .region__panel, .region__item, .hub-marker__icon, .region__chevron { transition-duration: .01ms !important; transition-delay: 0s !important; }
}