@font-face {
  font-family: "SF Pro Display";
  src: url("sf-pro-display-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("sf-pro-display-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ap-canvas: #0b0b0d;
  --surface: #101217;
  --surface-soft: #141820;
  --ink: #f4f5f7;
  --ink-soft: rgba(244, 245, 247, .72);
  --ink-muted: rgba(244, 245, 247, .52);
  --line: rgba(255, 255, 255, .10);
  --accent: #3171f6;
  --accent-soft: rgba(49, 113, 246, .18);
  --accent-pale: #a9c8ff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --max-width: 1160px;
  --page-pad: 32px;
}

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

/* The page is a light document with one dark section in it, not a dark
   document. It used to paint the near-black on html and body and lay its
   own faint grid over the whole viewport, which is why it was the only
   page on the site that did not sit on the warm canvas. Canvas, grid and
   type now come from css/brand.css and css/main.css like everywhere
   else; the only thing that stays dark is the map, which states its own
   background below. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--blue-accent-tint-2); }

:where(a, button):focus-visible {
  outline: 2px solid var(--accent-pale);
  outline-offset: 3px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .25px;
  line-height: 1;
  white-space: nowrap;
  transition: transform .45s var(--ease), background .25s ease, border-color .25s ease, box-shadow .35s ease;
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(.98); }
.button-primary {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 10px 30px rgba(49, 113, 246, .28);
}
.button-primary:hover { background: #2865e3; box-shadow: 0 14px 38px rgba(49, 113, 246, .38); }
.button-quiet {
  color: var(--accent-pale);
  background: rgba(49, 113, 246, .20);
  border-color: rgba(140, 180, 255, .28);
}
.button-quiet:hover { color: #fff; background: rgba(49, 113, 246, .34); }
.button-small { min-height: 38px; padding: 10px 18px; border-radius: 999px; font-size: 12px; }

.map-story {
  position: relative;
  height: 390dvh;
  min-height: 2400px;
  background: var(--ap-canvas);
}

.story-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}

.map-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 62% at 74% 48%, rgba(49, 113, 246, .15), transparent 65%),
    linear-gradient(100deg, rgba(6, 8, 12, .96) 0%, rgba(6, 8, 12, .82) 33%, rgba(6, 8, 12, .28) 62%, transparent 80%),
    linear-gradient(180deg, #090b10 0%, #101722 58%, #0b0b0d 100%);
}

.map-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.map-frame { position: absolute; inset: 0; }
.map-frame svg { width: 100%; height: 100%; overflow: visible; }
.map-camera {
  transform: translate(665px, 184px) scale(.82);
  transform-origin: 0 0;
  will-change: transform;
}

.state {
  fill: rgba(130, 170, 225, .045);
  stroke: rgba(180, 210, 255, .28);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: fill .9s var(--ease), stroke .9s var(--ease), opacity .9s var(--ease);
}

.state-nrw { stroke: rgba(180, 210, 255, .28); }

.map-story[data-phase="1"] .state:not(.state-nrw) { opacity: .24; }
.map-story[data-phase="1"] .state-nrw {
  fill: rgba(49, 113, 246, .12);
  stroke: #3171f6;
  stroke-width: 2.2;
}

.map-story[data-phase="2"] .state:not(.state-nrw) { opacity: .10; }
.map-story[data-phase="2"] .state-nrw {
  fill: rgba(49, 113, 246, .045);
  stroke: rgba(49, 113, 246, .46);
  stroke-width: 1.6;
}

.market-area {
  opacity: 0;
  fill: rgba(49, 113, 246, .18);
  stroke: #3171f6;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: opacity .9s var(--ease), fill .9s var(--ease);
}

.market-area-ruhr { fill: rgba(49, 113, 246, .10); stroke: rgba(126, 169, 255, .74); }
.map-story[data-phase="2"] .market-area { opacity: 1; }

.market-label {
  opacity: 0;
  transition: opacity .65s var(--ease);
}
.market-label circle { fill: #fff; stroke: #3171f6; stroke-width: 2; vector-effect: non-scaling-stroke; }
.market-label path { fill: none; stroke: rgba(180, 210, 255, .74); stroke-width: .8; vector-effect: non-scaling-stroke; }
.market-label text {
  fill: #fff;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: .15px;
  paint-order: stroke;
  stroke: rgba(7, 10, 15, .92);
  stroke-width: 1.8px;
  stroke-linejoin: round;
}
.map-story[data-phase="2"] .market-label { opacity: 1; }
.map-story[data-phase="2"] .label-cologne { transition-delay: 120ms; }
.map-story[data-phase="2"] .label-ruhr { transition-delay: 240ms; }

.story-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  pointer-events: none;
}

.copy-panel {
  position: absolute;
  top: 50%;
  left: var(--page-pad);
  width: min(590px, calc(50vw - 40px));
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, calc(-50% - 28px), 0);
  transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s linear .9s;
}

/* Copy follows the scroll direction: completed panels leave upward while
   the next panel waits below and rises into the same reading position. */
.map-story[data-phase="0"] .copy-panel[data-copy="1"],
.map-story[data-phase="0"] .copy-panel[data-copy="2"],
.map-story[data-phase="1"] .copy-panel[data-copy="2"] {
  transform: translate3d(0, calc(-50% + 28px), 0);
}

.copy-panel h1,
.copy-panel h2 {
  margin: 0;
  max-width: 12ch;
  color: #fff;
  font-size: clamp(40px, 4.7vw, 62px);
  font-weight: 700;
  letter-spacing: -2.2px;
  line-height: 1.02;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .45);
}

.copy-panel p:not(.eyebrow) {
  margin: 0;
  max-width: 510px;
  color: rgba(255, 255, 255, .74);
  font-size: 17px;
  line-height: 1.6;
}

.eyebrow {
  margin: 0;
  color: #78a9ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.map-story[data-phase="0"] .copy-panel[data-copy="0"],
.map-story[data-phase="1"] .copy-panel[data-copy="1"],
.map-story[data-phase="2"] .copy-panel[data-copy="2"] {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, -50%, 0);
  transition-delay: 110ms;
}

.scope-status {
  position: absolute;
  z-index: 3;
  right: var(--page-pad);
  bottom: 34px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 5px 12px;
  min-width: 220px;
}

.scope-status-label {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.scope-status strong { color: #fff; font-size: 13px; }
.scope-line { grid-column: 1 / -1; height: 2px; background: rgba(255, 255, 255, .13); overflow: hidden; }
.scope-line i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--scope-progress, .333));
  transform-origin: left;
  transition: transform .9s var(--ease);
}

.section-wrap { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-pad); }
.stock-section, .profile-section, .property-cta { position: relative; padding: 144px 0; scroll-margin-top: 96px; }

/* no background of their own: they sit on the canvas the whole site
   sits on, and the architectural grid runs through them */
.stock-section { background: none; }
.stock-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 76px; }
.stock-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.stock-copy h2,
.profile-heading h2,
.property-cta h2 {
  margin: 0;
  color: var(--ink-1);
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 700;
  letter-spacing: -1.8px;
  line-height: 1.05;
}
.stock-copy p,
.profile-heading > p:last-child,
.property-cta p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}
.stock-copy .section-note { color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }
.stock-image { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: var(--grey-100); }
.stock-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--hair);
  border-radius: inherit;
}
.stock-image img { width: 100%; aspect-ratio: 1.36 / 1; object-fit: cover; object-position: 58% center; }

/* a band marked by two hairlines rather than a filled panel */
.profile-section { background: none; border-block: 1px solid var(--hair); }
.profile-heading { max-width: 700px; display: flex; flex-direction: column; gap: 20px; }
.profile-heading h2 { max-width: 12ch; }
.profile-heading > p:last-child { max-width: 520px; }
/* Four criteria set as a specification: one rule across the top,
   hairlines between the cells, nothing enclosing anything. The same
   treatment the claims under the three pillar stories get. */
.criteria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 68px;
  border-top: 1px solid var(--ink-5);
}
.criterion { min-height: 172px; padding: 30px 44px 30px 0; border-bottom: 1px solid var(--hair); }
.criterion:nth-child(odd) { border-right: 1px solid var(--hair); }
.criterion:nth-child(even) { padding-left: 44px; }
.criterion:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 8px; }
.criterion h3 { margin: 0 0 14px; color: var(--ink-1); font-size: 18px; letter-spacing: -.4px; }
.criterion p { margin: 0; max-width: 43ch; color: var(--ink-3); font-size: 14.5px; line-height: 1.62; }

.property-cta { padding: 120px 0 132px; background: none; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 72px; }
.property-cta h2 { max-width: 13ch; }
.property-cta p { max-width: 600px; margin-top: 20px; }

.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  :root { --page-pad: 20px; }

  .map-story { height: 360dvh; }
  .story-pin { min-height: 560px; }

  .map-atmosphere {
    background:
      linear-gradient(180deg, rgba(6, 8, 12, .96) 0%, rgba(6, 8, 12, .72) 29%, rgba(6, 8, 12, .12) 54%, transparent 72%),
      linear-gradient(0deg, rgba(6, 8, 12, .72) 0%, transparent 25%),
      radial-gradient(100% 64% at 50% 63%, rgba(49, 113, 246, .16), transparent 70%),
      linear-gradient(180deg, #090b10 0%, #101722 62%, #0b0b0d 100%);
  }

  .story-copy { max-width: none; }
  .copy-panel {
    top: 104px;
    left: var(--page-pad);
    width: calc(100% - var(--page-pad) * 2);
    gap: 14px;
    transform: translate3d(0, -28px, 0);
  }
  .map-story[data-phase="0"] .copy-panel[data-copy="1"],
  .map-story[data-phase="0"] .copy-panel[data-copy="2"],
  .map-story[data-phase="1"] .copy-panel[data-copy="2"] { transform: translate3d(0, 28px, 0); }
  .copy-panel h1, .copy-panel h2 { max-width: 11ch; font-size: clamp(34px, 9.4vw, 48px); letter-spacing: -1.5px; }
  .copy-panel p:not(.eyebrow) { max-width: 520px; font-size: 15px; }
  .map-story[data-phase="0"] .copy-panel[data-copy="0"],
  .map-story[data-phase="1"] .copy-panel[data-copy="1"],
  .map-story[data-phase="2"] .copy-panel[data-copy="2"] { transform: none; }

  .scope-status { right: var(--page-pad); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); min-width: 180px; }

  .stock-section, .profile-section { padding: 96px 0; }
  .stock-grid { grid-template-columns: 1fr; gap: 48px; }
  .stock-copy { max-width: 620px; }
  .stock-image img { aspect-ratio: 16 / 10; }

  .criteria-grid { margin-top: 60px; }
  .criterion { padding-right: 28px; }
  .criterion:nth-child(even) { padding-left: 28px; }

  .property-cta { padding: 96px 0; }
  .cta-grid { grid-template-columns: 1fr; align-items: start; gap: 36px; }
}

@media (max-width: 640px) {
  .button-small { padding-inline: 14px; }

  .map-story { min-height: 2000px; }
  .copy-panel h1, .copy-panel h2 { max-width: 12ch; font-size: clamp(31px, 9vw, 40px); }
  .scope-status { left: var(--page-pad); right: var(--page-pad); min-width: 0; }

  .stock-section, .profile-section { padding: 80px 0; }
  .stock-copy h2, .profile-heading h2, .property-cta h2 { font-size: clamp(32px, 10vw, 42px); }
  .stock-image { border-radius: 16px; }
  .stock-image img { aspect-ratio: 4 / 3; }

  .criteria-grid { grid-template-columns: 1fr; }
  .criterion { min-height: 0; padding: 30px 0; border-right: 0 !important; }
  .criterion:nth-child(even) { padding-left: 0; }

  .property-cta { padding: 80px 0; }
  .property-cta .button { width: 100%; }
}

@media (hover: none) {
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .map-story { height: auto; min-height: 100dvh; }
  .story-pin { position: relative; min-height: 100dvh; }
  .map-story .copy-panel[data-copy="0"] { opacity: 1; visibility: visible; transform: translate3d(0, -50%, 0); }
  .map-story .copy-panel:not([data-copy="0"]) { display: none; }
  .scope-status { display: none; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .map-story .copy-panel[data-copy="0"] { transform: none; }
}