/* ============================================================
   Pagent — design tokens from Figma "Desktop - 2" (691:5314)
   ============================================================ */

:root {
  /* Colour */
  --ink: #111111;
  --ink-strong: #000000;
  --ink-block: #1a1a1a;
  --muted: #757575;
  --muted-soft: rgba(17, 17, 17, 0.5);
  --muted-mid: rgba(17, 17, 17, 0.8);
  --muted-link: rgba(17, 17, 17, 0.85);
  --surface: #ffffff;
  --surface-alt: #f4f4f4;
  --surface-shell: #f5f5f5;
  --line: #ebebeb;
  --line-soft: rgba(117, 117, 117, 0.2);
  --brand-text: #5c5c5c;
  --brand-tm: #a3a3a3;

  --yellow: #ecbd09;
  --blue: #53b4ea;
  --green: #34a37e;
  --heart: #f04747;

  /* Type */
  /* Display face across the whole page — General Sans Medium. */
  --font-display: "General Sans", "Plus Jakarta Sans", sans-serif;
  --font-sans: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mark: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;

  /* Layout */
  --gutter: 80px;
  --shell-gutter: 40px;
  --nav-h: 78px;
  /* The bar alone, without the 12px inset the floating pill sits in. Routes
     that dock a sticky bar under the nav collapse to this. */
  --nav-docked-h: 54px;
  /* Content never stretches past the design width — it stays centred and the
     extra space becomes margin on very wide screens. */
  --content: 1280px;
  --section-pad: 100px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip` rather than `hidden`: hidden turns body into a scroll container,
     which changes what `position: sticky` pins against. */
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  list-style: none;
}

/* The page content stacks above the pinned footer so it can reveal it. An
   opaque background keeps the footer from showing through the margin gaps
   between sections. */
main {
  position: relative;
  z-index: 1;
  background: var(--surface);
}

::selection {
  background: var(--yellow);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* Tighter vertical rhythm between sections on phones. */
@media (max-width: 760px) {
  :root {
    --section-pad: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
._overlay_10mxk_1 {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--surface-alt);
}

/* Logo stays solid; a narrow light sheen sweeps across it so the mark
   still reads as a loader rather than a static stamp. */
._mark_10mxk_15 {
  display: block;
  height: clamp(36px, 5.5vw, 52px);
  width: auto;
  -webkit-mask-image: linear-gradient(
    100deg,
    #000 44%,
    rgba(0, 0, 0, 0.35) 50%,
    #000 56%
  );
  mask-image: linear-gradient(
    100deg,
    #000 44%,
    rgba(0, 0, 0, 0.35) 50%,
    #000 56%
  );
  -webkit-mask-size: 220% 100%;
  mask-size: 220% 100%;
  -webkit-mask-position: 120% 0;
  mask-position: 120% 0;
  animation: _sweep_10mxk_1 1.6s ease-in-out infinite;
}

@keyframes _sweep_10mxk_1 {
  from {
    -webkit-mask-position: 120% 0;
    mask-position: 120% 0;
  }
  to {
    -webkit-mask-position: -120% 0;
    mask-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._mark_10mxk_15 {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
._shell_hrcv1_1 {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 12px var(--shell-gutter);
  transition: padding 0.34s var(--ease-out);
}

/* Docked: the inset collapses so the bar meets both edges and the sticky
   filter bar can sit flush against its underside. */
._shellMerged_hrcv1_11 {
  padding: 0;
}

/* No background at rest — the glass panel is a separate layer that fades in
   once the page is scrolled (see .barSurface). */
._bar_hrcv1_16 {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: border-radius 0.34s var(--ease-out);
}

._barMerged_hrcv1_24 {
  border-radius: 0;
}

/* Opaque rather than the frosted pill — a translucent header over scrolling
   results reads as a smear, and the docked bar below it is solid. */
._barMerged_hrcv1_24 ._barSurface_hrcv1_16 {
  border-radius: 0;
  background-image: none;
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Logo lines up with the filter bar's contents underneath. */
._barMerged_hrcv1_24 ._row_hrcv1_39 {
  padding: 0 var(--shell-gutter);
}

._barSurface_hrcv1_16 {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 12px;
  backdrop-filter: blur(13.125px);
  -webkit-backdrop-filter: blur(13.125px);
  background-image: linear-gradient(
    137.85deg,
    rgba(255, 255, 255, 0.7) 24.15%,
    rgba(255, 255, 255, 0.62) 100%
  );
  pointer-events: none;
}

._row_hrcv1_39 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 18px;
}

._logo_hrcv1_68 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

._logoImg_hrcv1_75 {
  display: block;
  height: 22px;
  width: auto;
}

._links_hrcv1_81 {
  display: flex;
  align-items: center;
}

._linkCell_hrcv1_86 {
  display: flex;
  align-items: center;
}

/* Also worn by the Infrastructure disclosure button, so the UA button
   defaults have to be cleared for it to match the anchors exactly. */
._link_hrcv1_81 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: none;
  cursor: pointer;
  min-width: 30px;
  height: 36px;
  padding: 0 18px;
  border-radius: 24px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 14.4px;
  color: var(--ink-strong);
  white-space: nowrap;
  position: relative;
}

._linkLabel_hrcv1_114 {
  position: relative;
  z-index: 1;
}

._linkPill_hrcv1_119 {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(17, 17, 17, 0.06);
}

._chevron_hrcv1_126 {
  width: 16px;
  height: 16px;
  display: block;
  position: relative;
  z-index: 1;
}

._divider_hrcv1_134 {
  width: 0.75px;
  height: 11.25px;
  background: var(--line);
  margin: 0 24px;
}

/* ---------- Light mode over dark image heroes ---------- */

._light_hrcv1_143 ._logo_hrcv1_68,
._light_hrcv1_143 ._link_hrcv1_81 {
  color: #fff;
}

._light_hrcv1_143 ._logoImg_hrcv1_75 {
  filter: invert(1);
}

._light_hrcv1_143 ._linkPill_hrcv1_119 {
  background: rgba(255, 255, 255, 0.16);
}

._light_hrcv1_143 ._chevron_hrcv1_126 {
  filter: invert(1);
}

._light_hrcv1_143 ._divider_hrcv1_134 {
  background: rgba(255, 255, 255, 0.35);
}

._light_hrcv1_143 ._burgerBar_hrcv1_164 {
  background: #fff;
}

/* ---------- Mega menu ---------- */

._menu_hrcv1_170 {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

._menuInner_hrcv1_176 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 18px 18px;
}

._menuCol_hrcv1_184 {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

._menuTitle_hrcv1_192 {
  font-family: var(--font-mark);
  font-weight: 500;
  font-size: 21px;
  line-height: 28.35px;
  color: #333;
  padding: 12px 0;
  width: 100%;
}

._menuRule_hrcv1_202 {
  width: 100%;
  height: 0.75px;
  background: var(--line);
  opacity: 0.6;
  margin-bottom: 18px;
}

._menuLink_hrcv1_210 {
  display: flex;
  align-items: center;
  min-width: 30px;
  padding: 11.25px 0 12px;
  border-radius: 24px;
  font-family: var(--font-mark);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 17.55px;
  color: #333;
  white-space: nowrap;
}

._menuLink_hrcv1_210:hover {
  color: var(--ink);
}

@media (max-width: 900px) {
  ._shell_hrcv1_1 {
    padding: 12px 16px;
  }

  /* Declared after .shellMerged, so the merge has to be restated here or the
     bar keeps its inset on a phone while losing its radius. */
  ._shellMerged_hrcv1_11 {
    padding: 0;
  }

  /* Matches the pages' 20px phone gutter, so the logo lines up with the
     content beneath it rather than sitting 4px inside. */
  ._barMerged_hrcv1_24 ._row_hrcv1_39 {
    padding: 0 20px;
  }

  ._row_hrcv1_39 {
    padding: 0 14px;
  }

  ._logoImg_hrcv1_75 {
    height: 18px;
  }

  ._divider_hrcv1_134 {
    margin: 0 8px;
  }

  ._link_hrcv1_81 {
    padding: 0 10px;
  }
}

/* ---------- Mobile menu ---------- */

._burger_hrcv1_164 {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 10px;
}

._burgerBar_hrcv1_164 {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ink-strong);
}

/* Dim + intercept the page while the mobile menu is open. Lives inside the
   fixed shell (z 60), below the bar but above all page content. */
._backdrop_hrcv1_285 {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(17, 17, 17, 0.3);
  touch-action: none;
}

._mobileMenu_hrcv1_293 {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

._mobileMenuInner_hrcv1_299 {
  display: flex;
  flex-direction: column;
  padding: 4px 18px 14px;
  /* The expanded Infrastructure list can outgrow the screen; the menu body
     scrolls within the viewport (the bar above stays put) without chaining
     into the scroll-locked page behind it. */
  max-height: calc(100svh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

._mobileLink_hrcv1_312 {
  padding: 12px 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink-strong);
  border-bottom: 0.75px solid rgba(17, 17, 17, 0.06);
}

._mobileLink_hrcv1_312:last-child {
  border-bottom: 0;
}

._mobileLinkActive_hrcv1_325 {
  font-weight: 700;
}

._activeDot_hrcv1_329 {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--yellow);
  vertical-align: middle;
}

._mobileToggle_hrcv1_339 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

._mobileSub_hrcv1_347 {
  overflow: hidden;
}

._mobileGroup_hrcv1_351 {
  display: flex;
  flex-direction: column;
  padding: 8px 0 4px 12px;
}

._mobileGroupTitle_hrcv1_357 {
  padding: 4px 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.45);
}

._mobileSubLink_hrcv1_367 {
  padding: 8px 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  color: #333;
}

@media (max-width: 600px) {
  ._links_hrcv1_81 {
    display: none;
  }

  ._burger_hrcv1_164 {
    display: flex;
  }
}
._sticker_1cu4p_1 {
  /* Decorative, but interactive: it leans toward the cursor and can be
     dragged around. */
  pointer-events: auto;
  will-change: transform;
}

._dragLayer_1cu4p_8 {
  cursor: grab;
  touch-action: none;
}

._dragLayer_1cu4p_8:active {
  cursor: grabbing;
}

._image_1cu4p_17 {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
/* In-flow spacer holding the pinned footer's place; its height is synced to
   the footer's measured height. */
._slot_5svz5_3 {
  position: relative;
}

/* Pinned behind the page and revealed as the content scrolls off it. The grey
   shell's rounded corners show this footer's white through the cutouts. */
._footer_5svz5_9 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  min-height: 670px;
  padding: 54px 81px 0;
  background: var(--surface);
  overflow: hidden;
}

._content_5svz5_21 {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
}

._blocks_5svz5_31 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

._brand_5svz5_38 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._mark_5svz5_44 {
  display: block;
  height: 28px;
  width: auto;
}

._tagline_5svz5_50 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 9.75px;
  line-height: 16.8px;
  color: var(--muted-soft);
}

._columns_5svz5_58 {
  display: flex;
  gap: 182px;
}

._column_5svz5_58 {
  display: flex;
  flex-direction: column;
  gap: 14.25px;
}

._columnTitle_5svz5_69 {
  padding: 0 6px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.8px;
  color: var(--ink);
  white-space: nowrap;
}

._link_5svz5_79 {
  display: block;
  padding: 0 6px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11.7px;
  line-height: 16.8px;
  color: var(--muted-link);
  white-space: nowrap;
  width: fit-content;
}

._rule_5svz5_91 {
  height: 0.75px;
  background: var(--line-soft);
}

/* Copyright left, legal links right; they stack on a phone. */
._bottomRow_5svz5_97 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

._legalLinks_5svz5_105 {
  display: flex;
  gap: 20px;
}

._legalLinks_5svz5_105 a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 9.9px;
  line-height: 16.8px;
  color: var(--muted-soft);
  transition: color 0.28s var(--ease-out);
}

._legalLinks_5svz5_105 a:hover {
  color: var(--ink);
}

._copyright_5svz5_123 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 9.9px;
  line-height: 16.8px;
  color: var(--muted-soft);
}

/* ---------- Oversized wordmark plate ---------- */

._plate_5svz5_133 {
  position: absolute;
  inset: 226px -41px auto -40px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Giant wordmark from the design: General Sans Bold 440px at 10% ink. Sized
   against the plate width so it scales with the viewport. */
._wordmark_5svz5_143 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(120px, 30.6vw, 441px);
  letter-spacing: -0.03em;
  line-height: normal;
  text-align: center;
  color: rgba(17, 17, 17, 0.1);
  white-space: nowrap;
  user-select: none;
}

._holoHouse_5svz5_155 {
  position: absolute;
  z-index: 1;
  left: 1084px;
  top: 337px;
  width: 310px;
}

._holoPerson_5svz5_163 {
  position: absolute;
  z-index: 1;
  left: 261px;
  top: 423px;
  width: 209px;
}

._holoKey_5svz5_171 {
  position: absolute;
  z-index: 1;
  left: 549px;
  top: 427px;
  width: 220px;
}

@media (max-width: 1200px) {
  ._footer_5svz5_9 {
    padding: 54px 48px 0;
  }

  ._columns_5svz5_58 {
    gap: 80px;
  }

  ._holoPerson_5svz5_163 {
    left: 6%;
  }

  ._holoHouse_5svz5_155 {
    left: auto;
    right: 2%;
  }

  ._holoKey_5svz5_171 {
    left: 40%;
  }
}

@media (max-width: 860px) {
  ._footer_5svz5_9 {
    min-height: 0;
    /* Reserved band at the bottom for the wordmark and stickers, clear of
       the link columns. */
    padding: 48px 20px 190px;
  }

  ._blocks_5svz5_31 {
    flex-direction: column;
    gap: 32px;
  }

  ._columns_5svz5_58 {
    flex-wrap: wrap;
    gap: 40px;
  }

  ._plate_5svz5_133 {
    inset: auto -12px -2% -12px;
  }

  ._holoHouse_5svz5_155 {
    width: 140px;
    top: auto;
    bottom: 24px;
    left: auto;
    right: 4%;
  }

  ._holoPerson_5svz5_163 {
    width: 92px;
    top: auto;
    bottom: 56px;
    left: 5%;
  }

  ._holoKey_5svz5_171 {
    width: 86px;
    top: auto;
    bottom: 12px;
    left: 40%;
  }
}
/* Scaled up ~30% from the Figma values — the comp's 27px chip and 12.75px
   label read too small in the browser, especially as tap targets. */
._button_bj4l8_3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 7px 7px 18px;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1;
  white-space: nowrap;
}

._dark_bj4l8_19 {
  background: var(--ink);
  color: var(--surface);
  border-radius: 75px;
}

/* Same pill, inverted — used as the secondary CTA beside a dark one. */
._lightPill_bj4l8_26 {
  background: var(--surface);
  color: var(--ink);
  border-radius: 75px;
}

._label_bj4l8_32 {
  text-align: center;
  /* Keeps side-by-side pairs the same width despite differing labels. */
  min-width: 96px;
}

._circle_bj4l8_38 {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  /* Whenever the pill is wider than its content — a stretched pair, a
     full-width CTA — the spare space would otherwise be split either side
     and leave the chip floating short of the edge. This hands all of it to
     the left so the chip sits on the pill's right padding. */
  margin-left: auto;
  overflow: hidden;
}

._round_bj4l8_53 {
  border-radius: 17px;
}

._icon_bj4l8_57 {
  width: 19px;
  height: 19px;
  display: block;
}

/* Waiting on a choice — muted, but still legible so the label can be read. */
._disabled_bj4l8_64 {
  opacity: 0.4;
  cursor: not-allowed;
}

._spinner_bj4l8_69 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(17, 17, 17, 0.25);
  border-top-color: var(--ink);
  animation: _spin_bj4l8_69 0.6s linear infinite;
}

@keyframes _spin_bj4l8_69 {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._spinner_bj4l8_69 {
    animation-duration: 1.6s;
  }
}

/* Phones: the pill has to fit two-up in a 375px column, so the fixed label
   width and the desktop breathing room come off. */
@media (max-width: 620px) {
  ._button_bj4l8_3 {
    gap: 6px;
    padding: 6px 6px 6px 14px;
    font-size: 13.5px;
    /* Pairs share the row evenly, so a long label wraps inside its pill
       instead of pushing its partner onto a second line. */
    white-space: normal;
  }

  ._label_bj4l8_32 {
    min-width: 0;
    line-height: 1.2;
  }

  ._circle_bj4l8_38 {
    width: 30px;
    height: 30px;
  }

  ._round_bj4l8_53 {
    border-radius: 15px;
  }

  ._icon_bj4l8_57 {
    width: 17px;
    height: 17px;
  }
}
/* Full-viewport hero — the action bar has to be visible without scrolling on
   every screen, so every offset is a share of the hero's own height rather
   than a fixed pixel value from the 1024px comp. */
._hero_1cwjr_4 {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--surface-alt);
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

/* Tiled grunge texture (696:8964) — 342px tile at 24% over the panel. */
._grunge_1cwjr_16 {
  position: absolute;
  /* Oversized past every edge so the scroll parallax (up to -60px) and any
     viewport height never reveal an untextured strip. */
  left: -25px;
  top: -80px;
  right: -25px;
  bottom: -160px;
  background-repeat: repeat;
  background-position: top left;
  background-size: 342px 342px;
  opacity: 0.24;
  pointer-events: none;
}

._house_1cwjr_31 {
  position: absolute;
  left: 50%;
  top: 40.3%;
  width: 109.6%;
  max-width: 1578px;
  translate: -50% 0;
  pointer-events: none;
}

._copy_1cwjr_41 {
  position: absolute;
  left: 50%;
  top: 15.6%;
  translate: -50% 0;
  width: 809px;
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  z-index: 2;
}

._badge_1cwjr_55 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 40px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.084px;
  color: rgba(17, 17, 17, 0.4);
  white-space: nowrap;
}

._dot_1cwjr_71 {
  width: 4px;
  height: 4px;
  display: block;
}

._headings_1cwjr_77 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}

._title_1cwjr_86 {
  font-family: var(--font-display);
  font-weight: 500;
  /* 50px at the comp size, easing down on shorter or narrower screens. */
  font-size: clamp(30px, 3.47vw, 50px);
  line-height: 1.16;
  color: var(--ink);
}

._line_1cwjr_95 {
  display: block;
  overflow: hidden;
  /* Descender headroom: the mask needs overflow:hidden, but the tight line
     height ends above the "g"/"y" tails. Padding extends the clip, the equal
     negative margin gives the space back so the rhythm is unchanged. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

._lineInner_1cwjr_105 {
  display: block;
}

._sub_1cwjr_109 {
  width: 687px;
  max-width: 100%;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.45;
  color: rgba(17, 17, 17, 0.6);
}

/* ---------- Floating action bar ---------- */

._bar_1cwjr_121 {
  position: absolute;
  left: 50%;
  top: 87.2%;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px;
  border-radius: 12px;
  border: 0.75px solid #dadada;
  background: var(--surface);
  max-width: calc(100% - 32px);
}

._barLead_1cwjr_137 {
  display: flex;
  align-items: center;
  gap: 11px;
}

._barIcon_1cwjr_143 {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex: none;
  border-radius: 7.5px;
  background: var(--yellow);
  font-family: var(--font-mark);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.96px;
  color: var(--surface);
  line-height: 1;
}

._barText_1cwjr_159 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.1px;
  line-height: 21px;
  color: var(--ink);
  white-space: nowrap;
}

._barCtas_1cwjr_168 {
  display: flex;
  align-items: center;
  gap: 4.5px;
}

/* Short viewports: pull the composition tighter so the bar still clears. */
@media (max-height: 760px) {
  ._copy_1cwjr_41 {
    top: 12%;
    gap: 18px;
  }

  ._house_1cwjr_31 {
    top: 42%;
  }

  ._bar_1cwjr_121 {
    top: auto;
    bottom: 4%;
  }
}

@media (max-width: 900px) {
  ._bar_1cwjr_121 {
    flex-direction: column;
    gap: 10px;
    padding: 10px 14px;
  }

  /* The P tile crowds the stacked layout — text and buttons only. */
  ._barIcon_1cwjr_143 {
    display: none;
  }

  ._barLead_1cwjr_137 {
    align-self: stretch;
  }

  ._barText_1cwjr_159 {
    white-space: normal;
    text-align: left;
    font-size: 13px;
    line-height: 18px;
  }
}

@media (max-width: 620px) {
  ._hero_1cwjr_4 {
    /* Short of a full viewport on phones, so the next section's white peeks
       into the first view as a scroll cue. */
    height: 97vh;
    height: 97svh;
    min-height: 0;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }

  ._copy_1cwjr_41 {
    top: 11%;
    gap: 14px;
  }

  ._sub_1cwjr_109 {
    font-size: 13.5px;
    color: rgba(17, 17, 17, 0.78);
  }

  ._badge_1cwjr_55 {
    font-size: 11px;
    gap: 6px;
    padding: 5px 8px;
  }

  ._house_1cwjr_31 {
    width: 150%;
    top: 48%;
  }

  ._bar_1cwjr_121 {
    top: auto;
    bottom: 24px;
    left: 16px;
    right: 16px;
    translate: none;
    max-width: none;
    gap: 8px;
    padding: 10px;
  }

  ._barCtas_1cwjr_168 {
    width: 100%;
  }

  ._barCtas_1cwjr_168 > * {
    flex: 1;
    justify-content: center;
    gap: 10px;
  }

  ._barLead_1cwjr_137 {
    gap: 8px;
  }

  ._barIcon_1cwjr_143 {
    width: 36px;
    height: 36px;
    font-size: 25px;
  }

  ._barText_1cwjr_159 {
    font-size: 12px;
    line-height: 16px;
  }
}

/* Tall phones have room to spare between the copy and the house, and starting
   at 11% left the badge crowding the floating nav. Two bands, because the
   headline wraps to an extra line on a narrow phone and eats the slack: the
   mid band also drops the house to pay for it. Short phones keep the tight
   offset — there the house is right underneath. */
@media (max-width: 620px) and (min-height: 780px) {
  ._copy_1cwjr_41 {
    top: 14%;
  }

  ._house_1cwjr_31 {
    top: 51%;
  }
}

@media (max-width: 620px) and (min-height: 880px) {
  ._copy_1cwjr_41 {
    top: 17%;
  }

  ._house_1cwjr_31 {
    top: 48%;
  }
}

/* Very narrow phones: the pills stay on one row and share it evenly — a long
   label wraps inside its own pill rather than stacking the pair. */
@media (max-width: 380px) {
  ._barCtas_1cwjr_168 {
    gap: 8px;
  }

  ._barCtas_1cwjr_168 > * {
    flex: 1 1 0;
    min-width: 0;
  }
}
/* ---------- Agents: activity feed (696:9106) ---------- */

/* The whole list is shown at once — no scrolling track, so no fade needed
   to hide rows being clipped at the edges. */
._feed_17bt3_5 {
  position: relative;
  width: 100%;
}

._feedTrack_17bt3_10 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._feedGroup_17bt3_16 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._feedRow_17bt3_22 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 56px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: var(--surface);
  will-change: transform;
}

._user_17bt3_35 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

._avatar_17bt3_42 {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 16px;
  overflow: hidden;
  background: #e2e8f0;
}

._avatarImg_17bt3_51 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._meta_17bt3_57 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._name_17bt3_64 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  line-height: normal;
  color: var(--ink);
  white-space: nowrap;
}

._note_17bt3_73 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: normal;
  color: var(--muted);
  white-space: nowrap;
}

._badge_17bt3_82 {
  flex: none;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  line-height: normal;
  color: var(--ink);
  white-space: pre;
}

/* ---------- Developers: fanned project cards (696:9149) ---------- */

._stack_17bt3_96 {
  position: relative;
  width: 100%;
  height: 284px;
}

._stackCard_17bt3_102 {
  position: absolute;
  width: 189.904px;
  height: 237.38px;
  padding: 18.99px;
  display: flex;
  flex-direction: column;
  gap: 66px;
  align-items: flex-start;
  border-radius: 18.99px;
}

._stackSide_17bt3_114 {
  border: 1.187px solid #e2e8f0;
  filter: drop-shadow(0 4.748px 7.121px rgba(0, 0, 0, 0.1));
}

/* Offsets are the un-rotated top-left of each card, derived from the rotated
   bounding boxes in the Figma file. */
._stackLeft_17bt3_121 {
  left: 3.602px;
  top: 52.678px;
  background: var(--surface);
}

._stackRight_17bt3_127 {
  right: 2.852px;
  top: 53.158px;
  background: var(--ink-block);
}

._stackFront_17bt3_133 {
  left: 50%;
  margin-left: -94.95px;
  top: 1.16px;
  background: #e11d48;
  filter: drop-shadow(0 7.121px 9.495px rgba(0, 0, 0, 0.15));
}

._bankHeader_17bt3_141 {
  display: flex;
  align-items: center;
  gap: 9.495px;
}

/* A white disc behind each partner's mark, so one grey mark reads the same on
   the white, dark and rose cards in the stack. */
._bankMark_17bt3_149 {
  width: 28.486px;
  height: 28.486px;
  flex: none;
  padding: 5px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

._bankName_17bt3_159 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14.243px;
  line-height: normal;
  white-space: nowrap;
}

._bankNameFront_17bt3_167 {
  font-size: 13.056px;
  color: #fff;
}

._bankMeta_17bt3_172 {
  display: flex;
  flex-direction: column;
  gap: 2.374px;
  padding-top: 23.738px;
  white-space: nowrap;
}

._bankLabel_17bt3_180 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11.869px;
  line-height: normal;
}

._bankValue_17bt3_187 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 26.112px;
  line-height: normal;
}

/* ---------- Mortgage: phone mockup (696:9180) ---------- */

._phoneWrap_17bt3_196 {
  position: relative;
  width: 100%;
  height: 100%;
}

._phone_17bt3_196 {
  position: absolute;
  left: 50%;
  margin-left: -143.31px;
  top: 0;
  width: 286.615px;
  display: flex;
  flex-direction: column;
  gap: 19.108px;
  padding: 14.331px 19.108px 19.108px;
  border-radius: 28.662px;
  border: 2.388px solid #e5e7eb;
  border-bottom: 0;
  background: var(--surface);
  overflow: hidden;
}

._statusBar_17bt3_219 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._clock_17bt3_225 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11.942px;
  line-height: normal;
  color: #111827;
}

._wifi_17bt3_233 {
  width: 14.331px;
  height: 11.942px;
}

._appHeader_17bt3_238 {
  display: flex;
  flex-direction: column;
  gap: 4.777px;
  white-space: nowrap;
}

._appLabel_17bt3_245 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.331px;
  line-height: normal;
  color: #6b7280;
}

._appTotal_17bt3_253 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 21.496px;
  line-height: normal;
  color: #111827;
}

._mockStats_17bt3_261 {
  display: flex;
  gap: 9.554px;
}

._stat_17bt3_219 {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 2.388px;
  min-width: 0;
  padding: 9.554px;
  border-radius: 9.554px;
  background: #f3f4f6;
}

._statLabel_17bt3_277 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10.748px;
  line-height: normal;
  color: #6b7280;
}

._statValue_17bt3_285 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13.137px;
  line-height: normal;
}

._performance_17bt3_292 {
  display: flex;
  flex-direction: column;
  gap: 14.331px;
}

._blockTitle_17bt3_298 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14.331px;
  line-height: normal;
  color: #111827;
}

._ranges_17bt3_306 {
  display: flex;
  gap: 9.554px;
}

._range_17bt3_306 {
  padding: 7.165px 11.942px;
  border-radius: 1193px;
  background: #f3f4f6;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.137px;
  line-height: normal;
  color: #374151;
  white-space: nowrap;
}

._chart_17bt3_323 {
  position: relative;
  height: 114.646px;
  border-radius: 14.331px;
  border: 1.194px solid #e5e7eb;
  background: #f9fafb;
  overflow: hidden;
}

._gridline_17bt3_332 {
  position: absolute;
  left: -1.19px;
  right: -1.19px;
  height: 1.194px;
  background: #e5e7eb;
}

._trend_17bt3_340 {
  position: absolute;
  left: 13.13px;
  top: 13.14px;
  width: 238.846px;
  height: 85.985px;
}

._assets_17bt3_348 {
  display: flex;
  flex-direction: column;
  gap: 14.331px;
}

._assetList_17bt3_354 {
  display: flex;
  flex-direction: column;
  gap: 11.942px;
}

._asset_17bt3_348 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._assetLeft_17bt3_366 {
  display: flex;
  align-items: center;
  gap: 11.942px;
}

._assetIcon_17bt3_372 {
  display: grid;
  place-items: center;
  width: 33.438px;
  height: 33.438px;
  flex: none;
  border-radius: 16.719px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14.331px;
  line-height: normal;
  color: #09090b;
}

._assetMeta_17bt3_386 {
  display: flex;
  flex-direction: column;
  gap: 2.388px;
  white-space: nowrap;
}

._assetTicker_17bt3_393 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14.331px;
  line-height: normal;
  color: #111827;
}

._assetName_17bt3_401 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11.942px;
  line-height: normal;
  color: #6b7280;
}

._assetRight_17bt3_409 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2.388px;
  white-space: nowrap;
}

._assetValue_17bt3_417 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14.331px;
  line-height: normal;
  color: #111827;
}

._assetChange_17bt3_425 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11.942px;
  line-height: normal;
}

._bottomNav_17bt3_432 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11.942px 14.331px;
  border-radius: 19.108px;
  border: 1.194px solid #e5e7eb;
  background: var(--surface);
}

._navItem_17bt3_442 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.777px;
}

._navIcon_17bt3_450 {
  width: 23.885px;
  height: 23.885px;
}

._navLabel_17bt3_455 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10.748px;
  line-height: normal;
  color: #6b7280;
  white-space: nowrap;
}

._navLabelOn_17bt3_464 {
  font-weight: 700;
  color: #c084fc;
}
/* why blocks (696:9096) — 1440×890, 80px gutters, 100px vertical padding. */
._section_jel9j_2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  /* 20px of page background sits between the hero panel and this frame. */
  margin-top: 20px;
  padding: var(--section-pad) var(--gutter);
  background: var(--surface);
}

._inner_jel9j_14 {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

._heading_jel9j_23 {
  width: 100%;
  max-width: 930px;
  margin-right: auto;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 32px;
  line-height: 47px;
  letter-spacing: -1px;
  color: var(--ink);
}

._line_jel9j_35 {
  display: block;
  overflow: hidden;
}

._lineInner_jel9j_40 {
  display: block;
}

._grid_jel9j_44 {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

/* The whole card links to that role's page. */
._card_jel9j_52 {
  position: relative;
  display: block;
  flex: 1 0 0;
  min-width: 0;
  height: 536px;
  padding: 30px;
  border-radius: 24px;
  background: var(--surface-alt);
  overflow: hidden;
  color: inherit;
  cursor: pointer;
  transition: background 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

._card_jel9j_52:hover {
  background: var(--role-bg);
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.14);
}

._card_jel9j_52:hover ._cardTitle_jel9j_72 {
  color: var(--role-fg);
}

._card_jel9j_52:hover ._cardBody_jel9j_76 {
  color: var(--role-muted);
}

._cardCopy_jel9j_80 {
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  padding: 7.5px 0;
  max-width: 600px;
}

._cardTitle_jel9j_72 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 25.125px;
  line-height: 31.5px;
  color: var(--ink);
  transition: color 0.45s var(--ease-out);
}

._cardBody_jel9j_76 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.175px;
  line-height: 21px;
  color: var(--muted);
  transition: color 0.45s var(--ease-out);
}

/* Each visual sits at its exact Figma offset inside the card. */
._mediaAgents_jel9j_108 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 210px;
}

._mediaDevelopers_jel9j_115 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 198px;
  height: 284px;
}

._mediaMortgage_jel9j_123 {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 211px;
  height: 621px;
}

@media (max-width: 1180px) {
  ._grid_jel9j_44 {
    flex-wrap: wrap;
  }

  ._card_jel9j_52 {
    flex: 1 0 45%;
  }
}

@media (max-width: 760px) {
  ._section_jel9j_2 {
    padding: 64px 20px;
    gap: 40px;
  }

  ._heading_jel9j_23 {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.5px;
  }

  ._card_jel9j_52 {
    flex: 1 0 100%;
    height: auto;
    padding: 24px;
  }

  /* Visuals flow under the copy instead of desktop pixel offsets. */
  ._mediaAgents_jel9j_108,
  ._mediaDevelopers_jel9j_115,
  ._mediaMortgage_jel9j_123 {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 24px;
  }

  ._mediaMortgage_jel9j_123 {
    /* Bleeds to the card's own edges so the phone reads as continuing out
       of view rather than being chopped mid-card. */
    height: 300px;
    margin: 24px -24px -24px;
    overflow: hidden;
  }
}
._section_omws8_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--section-pad) var(--gutter);
  background: var(--surface-alt);
}

._row_omws8_9 {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

._block_omws8_18 {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  height: 195px;
  padding: 15px;
  border-radius: 24px;
  background: var(--surface);
  overflow: hidden;
}

._value_omws8_31 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36.375px;
  line-height: 46.8px;
  white-space: nowrap;
}

._label_omws8_39 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.1px;
  line-height: 21px;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 720px) {
  ._section_omws8_1 {
    padding: 48px 20px;
  }

  ._row_omws8_9 {
    flex-direction: column;
  }

  ._block_omws8_18 {
    /* flex-basis 0 would collapse the block in a column container. */
    flex: none;
    height: 140px;
  }
}
/* The vertical padding (cancelled by the matching negative margin) pushes the
   clip boundary away from the row, so a card that lifts on hover is not
   sheared off at the top. */
._viewport_1hrev_4 {
  overflow: hidden;
  width: 100%;
  padding: 16px 0;
  margin: -16px 0;
}

._track_1hrev_11 {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Partner developers, presented as a section: heading, one line of context,
   then the marks. */

/* White: wherever it lands it should read as its own band. On Project Access
   it sits between two grey sections and would otherwise merge with both. */
._section_oh0ph_6 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface);
}

._inner_oh0ph_11 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--content);
  margin-inline: auto;
  text-align: center;
}

._title_oh0ph_20 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.22;
  color: var(--ink);
}

._sub_oh0ph_28 {
  max-width: 620px;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}

/* Even columns so the marks sit on a rhythm rather than bunching. */
._grid_oh0ph_38 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: center;
  gap: 32px 48px;
  width: 100%;
  max-width: 900px;
  margin-top: 52px;
}

._strip_oh0ph_48 {
  width: 100%;
  margin-top: 52px;
}

._item_oh0ph_53 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

/* Height-constrained so marks of different proportions sit on one optical
   line; they are already flattened to a single grey. */
._logo_oh0ph_62 {
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.3s var(--ease-out);
}

._item_oh0ph_53:hover ._logo_oh0ph_62 {
  opacity: 1;
}

@media (max-width: 760px) {
  ._section_oh0ph_6 {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Two per row. An odd count leaves the last mark centred under the pair
     rather than stranded in a corner. */
  ._grid_oh0ph_38 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
    margin-top: 38px;
  }

  ._grid_oh0ph_38 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  ._logo_oh0ph_62 {
    height: 42px;
  }

  ._item_oh0ph_53 {
    padding: 0;
  }
}
._section_pzbh2_1 {
  position: relative;
  /* flow-root keeps the last card's 270px bottom margin inside the section, so
     that card still has travel to stay pinned against. */
  display: flow-root;
  /* Bottom padding is viewport-relative so the LAST card always reaches the
     pinned stack (needs travel = lastFlowTop - stickTop) before the section
     bottom hits the viewport, on any screen height. At the 1024px comp height
     this resolves to the design's own 135px tail (with the 900px viewport of
     the comp's content area). */
  padding: 135px var(--gutter) max(24px, calc(100svh - 765px));
  background: var(--surface-alt);
}

/* Every card is a sticky child of this one container, so each pins in turn and
   the next slides over the top of it — they pile up rather than scrolling past.
   630px card + 270px of travel = the 900px track from the Figma file. */
._card_pzbh2_18 {
  position: sticky;
  top: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  height: 630px;
  max-width: var(--content);
  /* Spacing between cards lives in .gap spacers, NOT margins: a sticky
     element is constrained by its margin box, so bottom margins make earlier
     cards unpin before the last one arrives. */
  margin: 0 auto;
  padding: 8px;
  border-radius: 24px;
  overflow: hidden;
}

._gap_pzbh2_27 {
  height: 270px;
}

._content_pzbh2_40 {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding: 0 45px;
}

._badge_pzbh2_50 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 30px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.2px;
  line-height: 13.5px;
  white-space: nowrap;
}

._title_pzbh2_63 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 37px;
  max-width: 503px;
}

._line_pzbh2_71 {
  display: block;
  overflow: hidden;
}

._lineInner_pzbh2_76 {
  display: block;
}

._body_pzbh2_80 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.175px;
  line-height: 21px;
  max-width: 503px;
}

._media_pzbh2_88 {
  position: relative;
  width: 612px;
  height: 100%;
  flex: none;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
}

._mediaImage_pzbh2_98 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._mediaMark_pzbh2_104 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mark);
  font-weight: 500;
  font-size: 32.821px;
  letter-spacing: -0.9846px;
  color: #fff;
  pointer-events: none;
}

@media (max-width: 1180px) {
  ._media_pzbh2_88 {
    width: 46%;
  }

  ._content_pzbh2_40 {
    padding: 0 24px;
  }

  ._title_pzbh2_63 {
    font-size: 28px;
    line-height: 33px;
  }
}

@media (max-width: 860px) {
  ._section_pzbh2_1 {
    padding: 20px 20px 40px;
  }

  ._gap_pzbh2_27 {
    height: 40px;
  }

  /* Cards keep stacking on small screens — sticky under the nav, each riding
     over the one before. Copy sits on top, the video below it. */
  ._card_pzbh2_18 {
    position: sticky;
    top: 84px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    height: auto;
    padding: 20px 16px;
  }

  ._content_pzbh2_40 {
    padding: 8px 8px 0;
  }

  ._media_pzbh2_88 {
    width: 100%;
    height: 300px;
    flex: none;
  }

  ._title_pzbh2_63 {
    font-size: 24px;
    line-height: 29px;
  }
}

/* The title is authored as fixed lines for the desktop layout, but on a phone
   the first one is wider than the card, so it wrapped and left an orphan word
   on its own line. Below this width the lines run inline instead and the
   heading wraps as one balanced paragraph.

   The reveal slides each line out of a clipping box, which inline boxes cannot
   do — so it is switched off here rather than left half-applied, which would
   leave the text clipped out of sight. */
@media (max-width: 620px) {
  ._title_pzbh2_63 {
    text-wrap: balance;
  }

  ._line_pzbh2_71 {
    display: inline;
    overflow: visible;
  }

  ._line_pzbh2_71:not(:first-child)::before {
    content: " ";
  }

  ._lineInner_pzbh2_76 {
    display: inline;
    transform: none !important;
  }
}
/* Morphing paging dots — the active dot stretches into a pill.
   Tokens instead of Tailwind's primary/muted-foreground scale. */

._root_tj0qa_4 {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

._arrow_tj0qa_10 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  transition: background 0.28s var(--ease-out), color 0.28s var(--ease-out),
    opacity 0.28s var(--ease-out);
}

._arrow_tj0qa_10:hover:not(:disabled) {
  background: var(--ink);
  color: var(--surface);
}

._arrow_tj0qa_10:disabled {
  opacity: 0.3;
  cursor: default;
}

._dots_tj0qa_33 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._dot_tj0qa_33 {
  position: relative;
  height: 10px;
  width: 10px;
  flex: none;
  padding: 0;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.25);
  cursor: pointer;
  transition: background 0.28s var(--ease-out);
}

._dot_tj0qa_33:hover {
  background: rgba(17, 17, 17, 0.45);
}

._dotOn_tj0qa_55,
._dotOn_tj0qa_55:hover {
  background: var(--ink);
}

._ripple_tj0qa_60 {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.3);
  pointer-events: none;
}

._dot_tj0qa_33:focus-visible,
._arrow_tj0qa_10:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* On the ink CTA panel the control inverts. */
._onDark_tj0qa_75 ._arrow_tj0qa_10 {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

._onDark_tj0qa_75 ._arrow_tj0qa_10:hover:not(:disabled) {
  background: #fff;
  color: var(--ink);
}

._onDark_tj0qa_75 ._dot_tj0qa_33 {
  background: rgba(255, 255, 255, 0.35);
}

._onDark_tj0qa_75 ._dotOn_tj0qa_55,
._onDark_tj0qa_75 ._dotOn_tj0qa_55:hover {
  background: #fff;
}
._section_sts91_1 {
  padding: var(--section-pad) 0;
  background: var(--surface-alt);
  overflow: hidden;
}

._head_sts91_7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 var(--gutter);
  text-align: center;
}

._title_sts91_16 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25.2px;
  line-height: 31.5px;
  color: var(--ink);
}

._sub_sts91_24 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.175px;
  line-height: 21px;
  color: var(--muted);
}

._region_sts91_32 {
  width: 100%;
  /* The rail starts at the content's left edge and runs off the right edge of
     the viewport — cropped by the screen, not by a box mid-page. */
  padding: 45px 0 0 max(var(--gutter), calc(50vw - var(--content) / 2));
  overflow: visible;
}

._rail_sts91_40 {
  display: flex;
  gap: 12px;
  cursor: grab;
  width: max-content;
  user-select: none;
}

._rail_sts91_40:active {
  cursor: grabbing;
}

._card_sts91_52 {
  display: flex;
  flex-direction: column;
  flex: 0 0 381px;
  width: 381px;
  height: 482.83px;
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
}

._media_sts91_63 {
  position: relative;
  height: 320.83px;
  flex: none;
  overflow: hidden;
}

._mediaImage_sts91_70 {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

._tags_sts91_78 {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}

._tag_sts91_78 {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.88);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 0.06em;
  line-height: 11px;
}

._tagStatus_sts91_97 {
  color: var(--blue);
}

._tagReady_sts91_101 {
  color: var(--yellow);
}

._body_sts91_105 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 11.25px;
  padding: 15px;
}

._location_sts91_113 {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 8.475px;
  line-height: 10.8px;
  color: var(--muted);
}

._locationDot_sts91_124 {
  width: 4px;
  height: 4px;
}

._name_sts91_129 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15.6px;
  line-height: 18.15px;
  color: var(--ink);
}

._row_sts91_137 {
  display: flex;
  align-items: center;
  gap: 3px;
}

._rowIcon_sts91_143 {
  width: 16px;
  height: 16px;
  flex: none;
}

._rowLabel_sts91_149 {
  flex: 1;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11.475px;
  line-height: 16.8px;
  color: var(--muted);
}

._rowValue_sts91_158 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 18.15px;
  color: var(--ink);
  white-space: nowrap;
}

._dots_sts91_167 {
  display: flex;
  justify-content: center;
  padding-top: 45px;
}

._cta_sts91_173 {
  display: flex;
  justify-content: center;
  padding-top: 45px;
}

@media (max-width: 760px) {
  ._region_sts91_32 {
    padding: 32px 20px 0;
  }

  ._dots_sts91_167 {
    padding-top: 24px;
  }

  ._cta_sts91_173 {
    padding-top: 20px;
  }

  ._head_sts91_7 {
    padding: 0 20px;
  }

  ._card_sts91_52 {
    flex-basis: 280px;
    width: 280px;
    height: auto;
  }

  ._media_sts91_63 {
    height: 236px;
  }
}
._section_1mp3e_1 {
  padding: var(--section-pad) 0;
  background: var(--surface-alt);
  overflow: hidden;
}

._heading_1mp3e_7 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25.2px;
  line-height: 31.5px;
  color: var(--ink);
  text-align: center;
  margin-bottom: 30px;
}

._heart_1mp3e_17 {
  color: var(--heart);
}

._card_1mp3e_21 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 372.7px;
  height: 315px;
  padding: 22.5px;
  border-radius: 24px;
  background: var(--surface);
  flex: none;
}

._review_1mp3e_33 {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

._stars_1mp3e_39 {
  width: 87px;
  height: 15px;
}

._quote_1mp3e_44 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13.8px;
  line-height: 21px;
  color: var(--ink);
}

._citation_1mp3e_52 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._name_1mp3e_58 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12.75px;
  line-height: 13.5px;
  color: var(--ink);
}

._role_1mp3e_66 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  color: var(--ink);
}

@media (max-width: 720px) {
  ._card_1mp3e_21 {
    width: 300px;
    height: 280px;
    padding: 18px;
  }
}
._section_xefqu_1 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface-shell);
}

._inner_xefqu_6 {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  max-width: 1280px;
  margin: 0 auto;
}

._left_xefqu_14 {
  width: 455px;
  flex: none;
  padding-left: 15px;
}

._title_xefqu_20 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25.2px;
  line-height: 31.5px;
  color: var(--ink);
}

._subtitle_xefqu_28 {
  padding-top: 18px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.175px;
  line-height: 21px;
  color: var(--muted);
}

._list_xefqu_37 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

._item_xefqu_45 {
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}

._itemOpen_xefqu_51 {
  border-radius: 16px;
  background: #1c1c1c;
  /* Inset so the 1px stroke doesn't add to the 144px open-item height. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

._button_xefqu_58 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 15px;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17.325px;
  line-height: 25.2px;
  color: var(--ink);
}

._itemOpen_xefqu_51 ._button_xefqu_58 {
  min-height: 64px;
  padding: 16px;
  color: #fff;
}

._itemOpen_xefqu_51 ._toggle_xefqu_80 {
  width: 32px;
  height: 32px;
}

/* The open state shows a 32px minus, so the bars scale with the box. */
._itemOpen_xefqu_51 ._barH_xefqu_86 {
  left: 5.44px;
  top: 14.67px;
  width: 21.11px;
  height: 2.67px;
}

._itemOpen_xefqu_51 ._barV_xefqu_93 {
  left: 14.67px;
  top: 5.44px;
  width: 2.67px;
  height: 21.11px;
}

/* Plus that rotates into a minus — two bars, no icon swap. */
._toggle_xefqu_80 {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}

._bar_xefqu_86 {
  position: absolute;
  background: var(--yellow);
  border-radius: 0.75px;
}

._barH_xefqu_86 {
  left: 3.06px;
  top: 8.25px;
  width: 11.872px;
  height: 1.5px;
}

._barV_xefqu_93 {
  left: 8.25px;
  top: 3.06px;
  width: 1.5px;
  height: 11.872px;
}

._itemOpen_xefqu_51 ._bar_xefqu_86 {
  background: #fff;
}

._panel_xefqu_132 {
  overflow: hidden;
}

._answer_xefqu_136 {
  padding: 16px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1000px) {
  ._inner_xefqu_6 {
    flex-direction: column;
    gap: 32px;
  }

  ._left_xefqu_14 {
    width: 100%;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  ._section_xefqu_1 {
    padding: 48px 20px;
  }

  ._button_xefqu_58 {
    font-size: 15px;
    line-height: 22px;
  }

  ._answer_xefqu_136 {
    font-size: 14px;
  }
}
._section_19nj4_1 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface-shell);
  /* Last block of the grey content shell — it rounds off over the white
     footer, mirroring the hero's 40px corners. */
  border-radius: 0 0 40px 40px;
  /* Above the footer, which tucks 40px underneath so white fills the corner
     cutouts. */
  position: relative;
  z-index: 1;
}

._panel_19nj4_13 {
  position: relative;
  max-width: var(--content);
  margin-inline: auto;
  min-height: 413px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 60px 40px;
  background: var(--blue);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
}

/* Hand-drawn diagonal hatch from the design, rebuilt as two offset stroke
   layers that crowd the left and right edges and clear the centre. */
/* WebGL gradient sits under the hatch and the copy. */
._canvas_19nj4_33 {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

._hatch_19nj4_43 {
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    112deg,
    rgba(255, 255, 255, 0) 0 11px,
    rgba(255, 255, 255, 0.45) 11px 12.1px
  );
  /* Strokes crowd the left and right thirds and clear the middle, the way
     the hand-drawn original does. */
  mask-image: linear-gradient(to right, #000 8%, rgba(0, 0, 0, 0.5) 24%, transparent 38%),
    linear-gradient(to left, #000 8%, rgba(0, 0, 0, 0.5) 26%, transparent 40%);
  -webkit-mask-image: linear-gradient(
      to right,
      #000 8%,
      rgba(0, 0, 0, 0.5) 24%,
      transparent 38%
    ),
    linear-gradient(to left, #000 8%, rgba(0, 0, 0, 0.5) 26%, transparent 40%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Partner variant (725:10543): the panel sits on white, not the grey shell. */
._sectionWhite_19nj4_69 {
  background: var(--surface);
}

._content_19nj4_73 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

._badge_19nj4_83 {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 999px;
  /* Ink on translucent white: the panel is a light gradient now, so the old
     white-on-white-40% badge disappeared into it. */
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.02em;
  color: rgba(17, 17, 17, 0.62);
}

._title_19nj4_99 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 33px;
  line-height: 36.3px;
  color: var(--ink);
}

/* Partner variant title: Plus Jakarta Bold instead of the display face. */
._titleSans_19nj4_108 {
  font-family: var(--font-sans);
  font-weight: 700;
}

._line_19nj4_113 {
  display: block;
  overflow: hidden;
  /* Descender headroom: the mask needs overflow:hidden, but the tight line
     height ends above the "g"/"y" tails. Padding extends the clip, the equal
     negative margin gives the space back so the rhythm is unchanged. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

._lineInner_19nj4_123 {
  display: block;
}

._body_19nj4_127 {
  max-width: 544px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14.325px;
  line-height: 21px;
  color: var(--muted-mid);
}

/* Partner variant body: Plus Jakarta Medium in 80% ink. */
._bodyInk_19nj4_137 {
  font-family: var(--font-sans);
  font-weight: 500;
  color: rgba(17, 17, 17, 0.8);
}

._cta_19nj4_143 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4.5px;
  margin-top: 15px;
}

@media (max-width: 720px) {
  ._section_19nj4_1 {
    padding: 40px 16px;
  }

  ._panel_19nj4_13 {
    min-height: 0;
    padding: 48px 24px;
  }

  /* One CTA per line on phones. Sharing a row meant squeezing the pills
     narrow enough that the labels broke mid-phrase. */
  ._cta_19nj4_143 {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  ._title_19nj4_99 {
    font-size: 26px;
    line-height: 30px;
  }

  ._body_19nj4_127 {
    font-size: 13px;
  }
}
/* ---------- Hero (721:12191) — white, centered title, big team photo ---------- */

._hero_18w8r_3 {
  padding: 158px var(--gutter) 0;
  background: var(--surface);
}

._heroInner_18w8r_8 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: var(--content);
  margin-inline: auto;
}

/* Badge, title, then the supporting copy beneath it — all left-aligned. */
._heroHead_18w8r_17 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
}

._heroTitleCol_18w8r_25 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  /* The parent aligns to flex-start, which otherwise shrink-wraps this to its
     content and lets the title wrap early rather than at the gutter. */
  align-self: stretch;
}

._heroSub_18w8r_36 {
  min-width: 0;
  /* Measured to the copy: at 620 it broke to four lines and left "place."
     hanging alone; at 680 it settles at three with a full last line. Capping
     the measure also keeps it three lines on any screen size. */
  max-width: 680px;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}

._heroBadge_18w8r_48 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 40px;
  background: #eee;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.084px;
  color: rgba(17, 17, 17, 0.4);
  white-space: nowrap;
}

._heroTitle_18w8r_25 {
  font-family: var(--font-display);
  font-weight: 500;
  /* 28 rather than 30 at the small end: at 30px the next word never fits and
     the longest line stops 73px short of the gutter, so the block reads
     narrow even though its box is full width. At 28 it reaches 332 of 335. */
  font-size: clamp(28px, 3.47vw, 50px);
  line-height: 1.16;
  color: var(--ink);
}

._line_18w8r_74 {
  display: block;
  overflow: hidden;
}

._lineInner_18w8r_79 {
  display: block;
}

._heroMedia_18w8r_83 {
  height: 620px;
  border-radius: 16px;
  overflow: hidden;
}

._heroImage_18w8r_89 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Story split (721:12197) ---------- */

._story_18w8r_97 {
  padding: 60px var(--gutter) var(--section-pad);
  background: var(--surface);
}

._storyCol_18w8r_102 {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._colTitle_18w8r_110 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  color: var(--ink);
}

/* No colour here — each word's is driven by scroll position. Matches
   .introBody exactly; it used to sit a weight heavier. */
._storyBody_18w8r_120 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 18px);
  line-height: 1.65;
  letter-spacing: -0.01em;
}

/* Stands alone rather than sitting in a box. */
._callout_18w8r_129 {
  max-width: 680px;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--muted-mid);
}

._timeline_18w8r_139 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

._milestone_18w8r_145 {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

._milestoneYear_18w8r_151 {
  width: 60px;
  flex: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--blue);
}

._milestoneTitle_18w8r_160 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}

._milestoneBody_18w8r_168 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

/* ---------- Core values (721:12226) ---------- */

._values_18w8r_178 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface);
}

._valuesInner_18w8r_183 {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: var(--content);
  margin-inline: auto;
}

._valuesHead_18w8r_191 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

._sectionTitle_18w8r_199 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.2;
  color: var(--ink);
}

._valuesRow_18w8r_207 {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

._valueCard_18w8r_213 {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border-radius: 16px;
  background: var(--surface-alt);
}

._valueNum_18w8r_224 {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--yellow);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

._valueTitle_18w8r_237 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 12px;
}

._valueBody_18w8r_245 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

/* ---------- Team (721:12253) ---------- */

._team_18w8r_255 {
  padding: 80px var(--gutter) var(--section-pad);
  background: var(--surface-alt);
}

._teamInner_18w8r_260 {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: var(--content);
  margin-inline: auto;
}

._teamHead_18w8r_268 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

._teamBadge_18w8r_275 {
  background: var(--surface);
}

._teamRow_18w8r_279 {
  display: flex;
  gap: 24px;
}

._teamCard_18w8r_284 {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
}

._portrait_18w8r_295 {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
}

._portraitImage_18w8r_301 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._memberName_18w8r_307 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}

._memberRole_18w8r_314 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--blue);
  margin-top: 4px;
}

/* ---------- Awards strip (721:12279) ---------- */

._awards_18w8r_324 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-weight: 500;
  white-space: nowrap;
  flex-wrap: wrap;
}

._awardsLabel_18w8r_339 {
  font-size: 14px;
  color: var(--muted);
}

._award_18w8r_324 {
  font-size: 16px;
  color: var(--ink);
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  ._teamRow_18w8r_279 {
    flex-wrap: wrap;
  }

  ._teamCard_18w8r_284 {
    flex: 1 0 40%;
  }
}

@media (max-width: 900px) {
  ._valuesRow_18w8r_207 {
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  ._hero_18w8r_3 {
    padding: 120px 20px 0;
  }

  ._heroMedia_18w8r_83 {
    height: 420px;
  }

  ._story_18w8r_97,
  ._values_18w8r_178,
  ._team_18w8r_255 {
    padding-left: 20px;
    padding-right: 20px;
  }

  ._colTitle_18w8r_110 {
    font-size: 26px;
    line-height: 33px;
  }

  ._teamCard_18w8r_284 {
    flex: 1 0 100%;
  }

  ._awards_18w8r_324 {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 32px 20px;
    white-space: normal;
  }
}

/* ---------- Opening positioning ---------- */

._intro_18w8r_119 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface);
}

/* Heading on the left, copy on the right — and spanning the same content
   column as every other section, rather than a narrow centred measure that
   started 230px inside the page gutter. */
._block_18w8r_411 {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  /* A wide column gap — at 80 the heading and its copy crowded each other. */
  gap: 24px 140px;
  max-width: var(--content);
  margin-inline: auto;
  text-align: left;
}

/* Stays with the copy as it scrolls past. */
._blockHead_18w8r_422 {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  align-self: start;
}

._blockBody_18w8r_428 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  /* Holds the line to ~70 characters at 18px; the full 720 ran to 76. */
  max-width: 660px;
}

/* No colour here — each word's is driven by scroll position. 18 rather than
   21: at 21 this body copy outranked both the callout and the hero sub, which
   inverted the hierarchy, and it ran wider than the rest of the site's scale. */
._introBody_18w8r_119 {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.35vw, 18px);
  line-height: 1.65;
  letter-spacing: -0.01em;
}

/* Emphasis line closing the origin column. */
._pullQuote_18w8r_449 {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.35;
  color: var(--ink);
}

._teamSub_18w8r_458 {
  max-width: 640px;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}

/* Roles still to be filled carry a tile rather than a stock face. */
._portraitEmpty_18w8r_468 {
  background: var(--surface-alt);
  border: 1px dashed var(--line);
}

/* ---------- Closing ---------- */

._closing_18w8r_475 {
  padding: 40px var(--gutter) var(--section-pad);
  background: var(--surface-alt);
}

/* Shares .block's grid; the heading here is the statement, so it takes a
   wider left column than the section labels above it. */
._closingInner_18w8r_482 {
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
}

/* Not sticky — the whole block already drifts up on scroll. */
._closingInner_18w8r_482 ._blockHead_18w8r_422 {
  position: static;
}

._closingTitle_18w8r_491 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.2;
  color: var(--ink);
}

._closingBody_18w8r_499 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

._closingLines_18w8r_506 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Team links ---------- */

._memberCopy_18w8r_520 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Invisible twin of .linkedin, purely to reserve its height. */
._linkedinSpacer_18w8r_527 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 12px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  visibility: hidden;
}

/* Quiet until hovered — the name and role lead the card. */
._linkedin_18w8r_526 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 12px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  padding-bottom: 2px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  /* Same nudge-on-hover as the text links elsewhere on the site. */
  transition: color 0.28s var(--ease-out), gap 0.28s var(--ease-out),
    border-color 0.28s var(--ease-out);
}

._linkedin_18w8r_526 img {
  width: 13px;
  height: 13px;
  opacity: 0.55;
  transition: opacity 0.28s var(--ease-out);
}

._linkedin_18w8r_526:hover img {
  opacity: 1;
}

._linkedin_18w8r_526:hover {
  gap: 11px;
  color: var(--ink);
  border-color: var(--ink);
}

/* .intro and .closing are declared further down the file than the 760px block
   above, so their padding shorthand out-ranks it — the phone gutter for those
   two has to live here, after them. Without it both sat at the 80px desktop
   gutter while the image and the story column sat at 20px. */
@media (max-width: 760px) {
  ._intro_18w8r_119,
  ._closing_18w8r_475 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* .block and friends are declared further down than the 900px query above, so
   their rules out-rank it — this override has to live after them. Without it
   the grid kept two columns on a phone, collapsing the copy column to 0 and
   pushing the page 100px wider than the viewport. */
/* Between the stack and full width the 340/140 split leaves too little for
   the copy — 384px at 1024. Tighten both before it gets there. Ordered ahead
   of the 900px query below, which has to win where they overlap. */
@media (max-width: 1200px) {
  ._block_18w8r_411 {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: 72px;
  }

  ._closingInner_18w8r_482 {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  ._block_18w8r_411 {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Sticking would pin the heading over its own copy at this width. */
  ._blockHead_18w8r_422,
  ._closingInner_18w8r_482 ._blockHead_18w8r_422 {
    position: static;
  }

  ._blockBody_18w8r_428 {
    max-width: none;
  }

  ._closingInner_18w8r_482 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  ._heroHead_18w8r_17 {
    gap: 20px;
  }

  ._heroSub_18w8r_36 {
    max-width: none;
  }
}

/* The hero title runs as one flowing block by default so it fills a phone
   column left to right; above this width the written break is restored and
   balancing keeps the two lines even. Base rule first — declared after the
   query it would out-rank it at every width. */
._titleBreak_18w8r_640 {
  display: none;
}

@media (min-width: 901px) {
  ._titleBreak_18w8r_640 {
    display: inline;
  }

  ._heroTitle_18w8r_25 ._lineInner_18w8r_79 {
    text-wrap: balance;
  }
}
/* ---------- Hero & form split (721:12677) ---------- */

._split_1s0kz_3 {
  padding: 158px var(--gutter) var(--section-pad);
  background: var(--surface);
}

._splitInner_1s0kz_8 {
  display: flex;
  gap: 60px;
  max-width: var(--content);
  margin-inline: auto;
}

._formSide_1s0kz_15,
._detailSide_1s0kz_16 {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

._head_1s0kz_24 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Same hero pill as every other page (About, Capital, Projects, Properties). */
._badge_1s0kz_32 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 40px;
  background: #eee;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: rgba(17, 17, 17, 0.4);
  white-space: nowrap;
}

._title_1s0kz_47 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.2;
  color: var(--ink);
}

._form_1s0kz_15 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 16px;
  background: var(--surface-alt);
}

._field_1s0kz_64 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._label_1s0kz_70 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--ink);
}

._input_1s0kz_77 {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s var(--ease-out);
}

._input_1s0kz_77::placeholder {
  color: var(--muted);
}

._input_1s0kz_77:focus {
  border-color: var(--yellow);
}

textarea._input_1s0kz_77 {
  min-height: 100px;
  resize: vertical;
}

._actionRow_1s0kz_104 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._policy_1s0kz_111 {
  max-width: 220px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

._submit_1s0kz_119 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px 8px 16px;
  border-radius: 75px;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 14px;
  white-space: nowrap;
  transition: transform 0.3s var(--ease-out);
}

._submit_1s0kz_119:hover {
  transform: translateY(-2px);
}

._submitChip_1s0kz_138 {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--blue);
}

._submitIcon_1s0kz_147 {
  width: 16px;
  height: 16px;
}

/* ---------- Photo & details ---------- */

._photo_1s0kz_154 {
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
}

._photoImage_1s0kz_160 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._detailRow_1s0kz_166 {
  display: flex;
  gap: 24px;
}

._detailCell_1s0kz_171 {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._detailTitle_1s0kz_179 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}

._detailBody_1s0kz_186 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

._detailBody_1s0kz_186 a {
  color: var(--muted);
  transition: color 0.25s var(--ease-out);
}

._detailBody_1s0kz_186 a:hover {
  color: var(--ink);
}

/* ---------- Success ---------- */

._success_1s0kz_205 {
  align-items: flex-start;
  gap: 10px;
  padding: 40px 32px;
}

._successMark_1s0kz_211 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 20px;
  margin-bottom: 8px;
}

._successTitle_1s0kz_223 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
}

._successBody_1s0kz_230 {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 22px;
  color: var(--muted-mid);
  max-width: 380px;
}

@media (max-width: 900px) {
  ._splitInner_1s0kz_8 {
    flex-direction: column;
    gap: 40px;
  }
}

@media (max-width: 760px) {
  ._split_1s0kz_3 {
    padding: 120px 20px 48px;
  }

  ._form_1s0kz_15 {
    padding: 20px;
  }

  ._actionRow_1s0kz_104 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._photo_1s0kz_154 {
    height: 220px;
  }

  ._detailRow_1s0kz_166 {
    flex-direction: column;
    gap: 20px;
  }
}
/* ---------- Featured hero (725:7661) ---------- */

._hero_16k86_3 {
  padding: 150px var(--gutter) 80px;
  background: var(--surface);
}

._heroInner_16k86_8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: var(--content);
  margin-inline: auto;
  text-align: center;
}

._badge_16k86_18 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 40px;
  background: #eee;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: rgba(17, 17, 17, 0.4);
  white-space: nowrap;
}

._badgeOnGrey_16k86_33 {
  background: var(--surface);
}

._title_16k86_37 {
  margin-top: -20px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(32px, 3.33vw, 48px);
  line-height: 1.2;
  color: var(--ink);
}

._sub_16k86_46 {
  max-width: 620px;
  margin-inline: auto;
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 1.11vw, 16px);
  line-height: 1.6;
  color: var(--muted);
}

._line_16k86_55 {
  display: block;
  overflow: hidden;
}

._lineInner_16k86_60 {
  display: block;
}

._splitRow_16k86_64 {
  display: flex;
  gap: 16px;
  width: 100%;
}

._splitPhoto_16k86_70 {
  flex: 1 0 0;
  min-width: 0;
  height: 450px;
  border-radius: 16px;
  overflow: hidden;
}

._splitImage_16k86_78 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Filterable grid (725:7669) ---------- */

._catalog_16k86_86 {
  padding: 80px var(--gutter) var(--section-pad);
  background: var(--surface-alt);
}

._catalogInner_16k86_91 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: var(--content);
  margin-inline: auto;
}

._catalogHead_16k86_99 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

._catalogTitleBlock_16k86_106 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

._catalogTitle_16k86_106 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, 2.22vw, 32px);
  color: var(--ink);
}

._filters_16k86_120 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._filterChip_16k86_126 {
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
}

._filterChip_16k86_126:hover {
  transform: translateY(-1px);
}

._filterChipOn_16k86_144 {
  background: #111;
  border-color: #111;
  color: #fff;
}

._projectGrid_16k86_150 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

._projectDev_16k86_156 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
}

._projectCard_16k86_162 {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
}

._projectPhoto_16k86_172 {
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
}

._projectImage_16k86_178 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._projectMeta_16k86_184 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._projectNames_16k86_191 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

._projectName_16k86_191 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}

._projectKind_16k86_205 {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}

._projectValue_16k86_211 {
  flex: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--blue);
}

._empty_16k86_219 {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--muted);
}

/* ---------- Stats row (725:7715) ---------- */

._stats_16k86_230 {
  padding: 60px var(--gutter);
  background: var(--surface);
}

._statsRow_16k86_235 {
  display: grid;
  /* auto-fit rather than a fixed four — the row carries three stats now and
     a fixed count would leave an empty column. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: var(--content);
  margin-inline: auto;
}

._statBlock_16k86_245 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 16px;
  background: var(--surface-alt);
}

._statValue_16k86_254 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(32px, 2.77vw, 40px);
  color: var(--yellow);
}

._statLabel_16k86_261 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  ._catalogHead_16k86_99 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._statsRow_16k86_235 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  ._projectGrid_16k86_150 {
    grid-template-columns: 1fr;
  }

  ._splitRow_16k86_64 {
    flex-direction: column;
  }

  ._splitPhoto_16k86_70 {
    height: 280px;
    flex: none;
    width: 100%;
  }
}

@media (max-width: 640px) {
  ._hero_16k86_3 {
    padding: 120px 20px 48px;
  }

  ._catalog_16k86_86,
  ._stats_16k86_230 {
    padding-left: 20px;
    padding-right: 20px;
  }

  ._projectPhoto_16k86_172 {
    height: 240px;
  }

  ._statsRow_16k86_235 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Shared section furniture ---------- */

._sectionTitle_16k86_319 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.639vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
}

._sectionSub_16k86_328 {
  max-width: 560px;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Where we build ---------- */

._regions_16k86_339 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface);
}

._regionsInner_16k86_344 {
  max-width: var(--content);
  margin-inline: auto;
}

._regionsHead_16k86_349 {
  margin-bottom: 40px;
}

._regionGrid_16k86_353 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Tile, not a pill — a quiet target that carries its own count. */
._regionTile_16k86_360 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--surface-alt);
  text-align: left;
  transition: background 0.28s var(--ease-out), color 0.28s var(--ease-out);
}

._regionTile_16k86_360:hover {
  background: #ececec;
}

._regionTileOn_16k86_376,
._regionTileOn_16k86_376:hover {
  background: var(--ink);
}

._regionName_16k86_381 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}

._regionCount_16k86_388 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
}

._regionTileOn_16k86_376 ._regionName_16k86_381 {
  color: var(--surface);
}

._regionTileOn_16k86_376 ._regionCount_16k86_388 {
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- Development rail ---------- */

._rail_16k86_405 {
  padding: var(--section-pad) 0;
  background: var(--surface-alt);
}

._railHead_16k86_410 {
  margin: 0 0 40px;
  padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2));
}

._railHead_16k86_410 > * {
  max-width: var(--content);
}

/* Full-bleed: cards run past both gutters rather than stopping at the column. */
._railTrack_16k86_420 {
  display: flex;
  gap: 20px;
  padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2));
  overflow-x: auto;
  /* Explicitly hidden: setting only overflow-x to auto makes the other axis
     compute to auto too, which let the cards scroll up and down inside the
     rail as well as across it. */
  overflow-y: hidden;
  /* No scroll-snap: the dots page by scroll progress, and mandatory snapping
     dragged those positions onto the nearest card start. */
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

._railTrack_16k86_420::-webkit-scrollbar {
  display: none;
}

._railCard_16k86_440 {
  position: relative;
  flex: none;
  width: clamp(240px, 24vw, 320px);
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

._railImage_16k86_451 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

._railCard_16k86_440:hover ._railImage_16k86_451 {
  transform: scale(1.06);
}

._railScrim_16k86_462 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.05) 45%,
    rgba(10, 10, 10, 0.78) 100%
  );
}

._railMeta_16k86_472 {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._railName_16k86_482 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  color: #fff;
}

._railPlace_16k86_490 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

/* Map pin, drawn rather than shipped as an icon. */
._railPin_16k86_502 {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

._railControls_16k86_511 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2));
}

._railArrows_16k86_520 {
  display: flex;
  gap: 10px;
}

._railArrow_16k86_520 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  transition: background 0.28s var(--ease-out);
}

._railArrow_16k86_520:hover {
  background: var(--ink);
  color: var(--surface);
}

._railAll_16k86_543 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--surface);
  transition: gap 0.28s var(--ease-out);
}

._railAll_16k86_543 img {
  width: 15px;
  height: 15px;
  filter: invert(1);
}

._railAll_16k86_543:hover {
  gap: 14px;
}

/* ---------- Richer project cards ---------- */

._projectPhoto_16k86_172 {
  position: relative;
}

._projectStatus_16k86_573 {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

._projectStatusAlt_16k86_587 {
  background: var(--yellow);
}

/* Tier badge sits on the image, the way a signature mark does. */
._projectTier_16k86_592 {
  position: absolute;
  left: 0;
  bottom: 16px;
  padding: 9px 16px;
  border-radius: 0 999px 999px 0;
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(6px);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  color: #fff;
}

._projectBody_16k86_606 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px 4px;
}

._projectValue_16k86_211 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

._projectName_16k86_191 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

._projectCity_16k86_630 {
  font-weight: 400;
  color: var(--muted);
}

._projectStats_16k86_635 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
}

/* Dot separators between the stat items. */
._projectStats_16k86_635 li + li::before {
  content: "·";
  margin-right: 10px;
  color: var(--line-soft);
}

@media (max-width: 1000px) {
  ._regionGrid_16k86_353 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  ._regions_16k86_339,
  ._rail_16k86_405 {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  ._regions_16k86_339 {
    padding-inline: 20px;
  }

  ._regionGrid_16k86_353 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._railHead_16k86_410,
  ._railTrack_16k86_420,
  ._railControls_16k86_511 {
    padding-inline: 20px;
  }

  /* Pagination first, then the button centred beneath it. */
  ._railControls_16k86_511 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  ._railCard_16k86_440 {
    width: 74vw;
  }
}
/* ============================================================
   Real Estate — the buy / sell / rent / manage layer.
   Same envelope as every other inner page: full-bleed image hero,
   grey shell sections, ink board, rounded 24px cards.
   ============================================================ */

/* ---------- Hero (293:51673) ----------
   1440 x 1024 in the comp. Every layer below is positioned as a percentage of
   that frame so the composition holds its proportions at any width. */

._hero_1q4ue_11 {
  position: relative;
  /* 1024 / 1440 = 71.1% of the width, floored so it never collapses. */
  --hero-h: clamp(620px, 71.1vw, 1024px);
  height: var(--hero-h);
  overflow: hidden;
  background: #bcd9f2;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

/* The drifting sky — the frame's video fill in Figma. */
._heroSky_1q4ue_23 {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Cut-out townhouses over the sky (x -467, y 301, 2000 x 1333 in the comp).
   Sized by WIDTH with height left to the 2000:1333 aspect — stretching both
   axes to percentages of the hero box distorted the render and pulled the
   roofline up on wide screens. Anchored from the bottom so the row keeps its
   footing as the viewport grows; the offset resolves to the comp's 301px top
   at 1440 and tracks the image's own height above that. */
._heroTownhouses_1q4ue_39 {
  position: absolute;
  z-index: 1;
  left: 50%;
  /* 2000 x 1333 in the comp — height derived so the aspect never distorts. */
  --img-w: 138.89vw;
  --img-h: calc(var(--img-w) * 0.66665);
  /* The PNG carries transparent sky above the roofline: in the middle of the
     image, where the CTAs sit, the first opaque pixel is 18.9% down. Anchoring
     on the image's top edge therefore let the actual roofline sink as the
     image scaled up — 47% of the hero at 1440 but 66% on a 2560 monitor.
     Solving for the roofline instead keeps it at ~46.6% of the hero at every
     width, so the buttons rest on the buildings on any screen. */
  width: var(--img-w);
  height: auto;
  bottom: calc(0.534 * var(--hero-h) - 0.811 * var(--img-h));
  margin-left: calc(var(--img-w) / -2);
  max-width: none;
  pointer-events: none;
  will-change: transform;
}

/* Grunge plate at 24%, sat over both (x -134, y -46, 1709 x 1117). */
._heroGrunge_1q4ue_62 {
  position: absolute;
  z-index: 2;
  left: -9.31%;
  top: -4.49%;
  width: 118.68%;
  height: 109.08%;
  opacity: 0.24;
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Centred with auto margins, not translateX — the scroll parallax owns the
   transform. */
._heroInner_1q4ue_78 {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  /* Clear of the floating nav rather than tight under it — the comp's 12.4%
     sat the badge almost against the bar. */
  top: 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 620px;
  max-width: calc(100% - 40px);
  margin-inline: auto;
  text-align: center;
}

/* Translucent white, not solid — the sky reads through it. */
._heroBadge_1q4ue_97 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.4);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.084px;
  color: rgba(17, 17, 17, 0.4);
  white-space: nowrap;
}

/* Ink, not white — the copy sits against bright sky in this comp. */
._heroTitle_1q4ue_113 {
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 4.722vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* The mask-up reveal needs overflow:hidden, but at line-height 1.08 the box
   ends above the descenders — the "g" in "Manage" was being cut off by ~2.4px.
   The padding extends the clip below the baseline and the equal negative
   margin gives the space back, so the line rhythm is unchanged. */
._line_1q4ue_127 {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

._lineInner_1q4ue_134 {
  display: block;
}

/* Swappable word. The box animates to each word's measured width so the rest
   of the line reflows smoothly, rather than being pinned to the widest word.
   The padding/negative-margin pair is the same descender trick used on .line:
   this is a SECOND clipping box, and without it the "g" in "managed" was being
   cut by ~4px even though the outer line had headroom. */
._rotator_1q4ue_143 {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  /* Both children are absolutely positioned, so nothing is left in flow to
     give this box height — it has to carry the line's own height. content-box
     is deliberate: under the global border-box the height would swallow the
     descender padding below and clip the "g" again. */
  box-sizing: content-box;
  height: 1.08em;
  height: 1lh;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

/* Measured, never seen: absolute so it contributes no width of its own. */
._rotatorMeasure_1q4ue_160 {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

._rotatorMeasure_1q4ue_160 > span {
  display: block;
  width: max-content;
  white-space: nowrap;
}

/* Colour comes from the word's own entry. The soft shadow is not a visible
   effect — it just keeps these light tints crisp against a moving sky. */
._rotatorWord_1q4ue_176 {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  white-space: nowrap;
  text-shadow: 0 1px 18px rgba(9, 38, 71, 0.3);
}

._heroSub_1q4ue_185 {
  max-width: 620px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(13.5px, 1.11vw, 16px);
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.78);
}

._heroCtas_1q4ue_194 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* ---------- Shared section furniture ---------- */

._badge_1q4ue_204 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 40px;
  background: #eee;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: rgba(17, 17, 17, 0.4);
  white-space: nowrap;
}

._badgeDark_1q4ue_220 {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

._sectionTitle_1q4ue_225 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.639vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
}

._sectionSub_1q4ue_234 {
  max-width: 560px;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.55;
  color: var(--muted);
}

/* A quiet inline link with the arrow glyph — used under cards. */
._textLink_1q4ue_243 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  border-bottom: 1px solid rgba(17, 17, 17, 0.18);
  padding-bottom: 4px;
  transition: gap 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

._textLink_1q4ue_243 img {
  width: 14px;
  height: 14px;
}

._textLink_1q4ue_243:hover {
  gap: 12px;
  border-color: var(--ink);
}

/* ---------- Stats ---------- */

._stats_1q4ue_269 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface);
}

._statRow_1q4ue_274 {
  display: grid;
  /* auto-fit rather than a fixed four — the row carries three stats now and
     a fixed count would leave an empty column. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: var(--content);
  margin-inline: auto;
}

._statCard_1q4ue_284 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 178px;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface-alt);
}

._statValue_1q4ue_295 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 2.639vw, 38px);
  line-height: 1.2;
  white-space: nowrap;
}

._statLabel_1q4ue_303 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  color: var(--ink);
}

/* ---------- Intro ---------- */

/* 100px clear of the partners strip above, matching the comp. */
._intro_1q4ue_313 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface);
}

._introInner_1q4ue_318 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  max-width: var(--content);
  margin-inline: auto;
}

._introCopy_1q4ue_327 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

._introTitle_1q4ue_334 {
  max-width: 460px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.056vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

._introBody_1q4ue_344 {
  max-width: 480px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

._introPhoto_1q4ue_352 {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

._introPhoto_1q4ue_352 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Capability rail ---------- */

/* Not clipped to the content column — the carousel runs the full width so
   cards stay visible past the gutter on both sides. */
._rail_1q4ue_368 {
  padding: var(--section-pad) 0;
  background: var(--surface-shell);
}

/* Aligned with the same expression the track uses, so the heading starts on
   the content column like every other section. A max-width of --content plus
   an inner gutter double-counted the inset (box-sizing is border-box), which
   pushed this heading 80px right of everything else on the page. */
._railHead_1q4ue_377 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 44px;
  padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2));
}

._railHead_1q4ue_377 > * {
  max-width: var(--content);
}

/* Heading for sections that already carry their own gutter — same rhythm as
   .railHead but without a second inset, which would double-count it. */
._sectionHead_1q4ue_391 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--content);
  margin: 0 auto 44px;
}

/* Wide cards that only partly fit the viewport — drag/scroll sideways to
   step through the rest, rather than a four-up grid. */
/* Full-bleed rail. The first card lines up with the gutter via scroll padding
   rather than a max-width, so neighbouring cards bleed off both edges instead
   of being cut at the content column. */
._railTrack_1q4ue_404 {
  display: flex;
  gap: 20px;
  padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2));
  overflow-x: auto;
  /* Explicit, or the other axis computes to auto too and the cards scroll up
     and down inside the rail as well as across it. */
  overflow-y: hidden;
  /* No scroll-snap: the dots page by scroll progress, and mandatory snapping
     drags those positions onto the nearest card start. */
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

._railTrack_1q4ue_404::-webkit-scrollbar {
  display: none;
}

/* Same inset expression as .railHead, so the control lines up with the
   heading rather than with the bleeding track. */
._railControls_1q4ue_425 {
  display: flex;
  margin: 32px 0 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2));
}

._railCard_1q4ue_431 {
  display: flex;
  align-items: stretch;
  flex: none;
  width: min(680px, 82vw);
  padding: 8px;
  border-radius: 24px;
  background: var(--surface);
  scroll-snap-align: start;
}

._railPhoto_1q4ue_442 {
  flex: none;
  width: 42%;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(165deg, #09182b 10%, #111 80%);
}

._railPhoto_1q4ue_442 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._railCopy_1q4ue_456 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 28px 32px;
  min-width: 0;
}

/* Body copy lengths differ, so the links would otherwise sit at four
   different heights across the row. */
._railCopy_1q4ue_456 ._textLink_1q4ue_243 {
  margin-top: auto;
}

._railHeadRow_1q4ue_473 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

._railTitle_1q4ue_481 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
}

._railDot_1q4ue_489 {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

._railBody_1q4ue_496 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

/* ---------- Communities ---------- */

._communities_1q4ue_505 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface-shell);
}

._communityGrid_1q4ue_510 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--content);
  margin-inline: auto;
}

._communityCta_1q4ue_518 {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

._communityCard_1q4ue_524 {
  position: relative;
  display: block;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
}

._communityImage_1q4ue_533 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

._communityCard_1q4ue_524:hover ._communityImage_1q4ue_533 {
  transform: scale(1.06);
}

._communityScrim_1q4ue_544 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.05) 40%,
    rgba(10, 10, 10, 0.72) 100%
  );
}

._communityMeta_1q4ue_554 {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._communityName_1q4ue_563 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
}

._communitySub_1q4ue_571 {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- The four pillars ---------- */

._pillars_1q4ue_580 {
  padding: var(--section-pad) var(--gutter) calc(var(--section-pad) + 40px);
  background: var(--surface);
}

._pillarStack_1q4ue_585 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--content);
  margin-inline: auto;
}

/* Each slot pins a little lower than the one before it, so the cards deal
   themselves into a deck as you scroll past. The index arrives as a custom
   property so the offset can be retuned per breakpoint. */
._pillarSlot_1q4ue_596 {
  position: sticky;
  top: calc(var(--nav-h) + 28px + var(--slot-index) * 14px);
}

/* Case Study Card (299:52220) — 1280 x 630 with a 9px inset, a 590 copy
   column and a square 612 media panel. */
._pillarCard_1q4ue_603 {
  display: grid;
  grid-template-columns: 590fr 612fr;
  gap: 60px;
  height: 630px;
  padding: 9px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
}

._pillarCopy_1q4ue_614 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  /* 45px in from the copy panel, per the comp. */
  padding-left: 45px;
}

._pillarWords_1q4ue_624 {
  display: flex;
  flex-direction: column;
}

._pillarWord_1q4ue_624 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: rgba(17, 17, 17, 0.16);
  transition: color 0.4s var(--ease-out);
}

._pillarWordOn_1q4ue_639 {
  color: var(--ink);
}

._pillarTags_1q4ue_643 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 440px;
}

._pillarTag_1q4ue_643 {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-alt);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--muted-mid);
}

._pillarBody_1q4ue_661 {
  max-width: 420px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

._pillarActions_1q4ue_669 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
}

._pillarPhoto_1q4ue_677 {
  border-radius: 20px;
  overflow: hidden;
}

._pillarPhoto_1q4ue_677 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- FAQs ---------- */

._faqs_1q4ue_690 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface-shell);
}

._faqInner_1q4ue_695 {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  max-width: var(--content);
  margin: 0 auto;
}

._faqLeft_1q4ue_703 {
  width: 455px;
  flex: none;
  padding-left: 15px;
}

._faqTitle_1q4ue_709 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25.2px;
  line-height: 31.5px;
  color: var(--ink);
}

._faqSubtitle_1q4ue_717 {
  padding-top: 18px;
  max-width: 340px;
  font-family: var(--font-sans);
  font-size: 14.175px;
  line-height: 21px;
  color: var(--muted);
}

._faqList_1q4ue_726 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

._faqItem_1q4ue_734 {
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}

._faqItemOpen_1q4ue_740 {
  background: #1c1c1c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

._faqButton_1q4ue_745 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 15px;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17.325px;
  line-height: 25.2px;
  color: var(--ink);
}

._faqItemOpen_1q4ue_740 ._faqButton_1q4ue_745 {
  min-height: 64px;
  padding: 16px;
  color: #fff;
}

._faqToggle_1q4ue_767 {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}

._faqItemOpen_1q4ue_740 ._faqToggle_1q4ue_767 {
  width: 32px;
  height: 32px;
}

._faqBar_1q4ue_779 {
  position: absolute;
  background: var(--yellow);
  border-radius: 0.75px;
}

._faqBarH_1q4ue_785 {
  left: 3.06px;
  top: 8.25px;
  width: 11.872px;
  height: 1.5px;
}

._faqBarV_1q4ue_792 {
  left: 8.25px;
  top: 3.06px;
  width: 1.5px;
  height: 11.872px;
}

._faqItemOpen_1q4ue_740 ._faqBarH_1q4ue_785 {
  left: 5.44px;
  top: 14.67px;
  width: 21.11px;
  height: 2.67px;
}

._faqItemOpen_1q4ue_740 ._faqBarV_1q4ue_792 {
  left: 14.67px;
  top: 5.44px;
  width: 2.67px;
  height: 21.11px;
}

._faqItemOpen_1q4ue_740 ._faqBar_1q4ue_779 {
  background: #fff;
}

._faqPanel_1q4ue_817 {
  overflow: hidden;
}

._faqAnswer_1q4ue_821 {
  padding: 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  ._statRow_1q4ue_274 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._introInner_1q4ue_318 {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  ._introPhoto_1q4ue_352 {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 1000px) {
  ._faqInner_1q4ue_695 {
    flex-direction: column;
    gap: 32px;
  }

  ._faqLeft_1q4ue_703 {
    width: 100%;
    padding-left: 0;
  }

  /* Cards nearly fill a phone screen, so the deck still works — it just
     needs a tighter offset than the desktop rhythm. */
  ._pillarSlot_1q4ue_596 {
    top: calc(var(--nav-h) + 8px + var(--slot-index) * 8px);
  }

  ._pillarCard_1q4ue_603 {
    grid-template-columns: 1fr;
    height: auto;
    gap: 28px;
    padding: 28px;
  }

  ._pillarCopy_1q4ue_614 {
    padding-left: 0;
  }

  ._pillarPhoto_1q4ue_677 {
    height: 300px;
    order: -1;
  }
}

@media (max-width: 900px) {
  ._communityGrid_1q4ue_510 {
    grid-template-columns: 1fr;
  }

  ._communityCard_1q4ue_524 {
    height: 300px;
  }

  ._railCard_1q4ue_431 {
    flex-direction: column;
    width: 78%;
  }

  ._railPhoto_1q4ue_442 {
    width: 100%;
    height: 190px;
  }

  ._railCopy_1q4ue_456 {
    padding: 20px 8px 8px;
  }
}

@media (max-width: 620px) {
  ._hero_1q4ue_11 {
    height: 97vh;
    height: 97svh;
    min-height: 0;
    padding: 120px 20px 56px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }

  /* The desktop offset is derived from the hero scaling with the viewport
     width; on a phone the hero hits its own height instead, which left the
     row floating ~50px above the bottom edge. Sit it on the edge and widen
     it so the buildings still read at this size. */
  ._heroTownhouses_1q4ue_39 {
    --img-w: 180vw;
    bottom: 0;
  }

  ._heroBadge_1q4ue_97 {
    font-size: 11px;
    padding: 5px 8px;
  }

  /* Equal widths on one line, the same treatment the role-page heroes use. */
  ._heroCtas_1q4ue_194 {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }

  ._heroCtas_1q4ue_194 > * {
    flex: 1 1 0;
    min-width: 0;
  }

  ._stats_1q4ue_269,
  ._communities_1q4ue_505,
  ._pillars_1q4ue_580,
  ._faqs_1q4ue_690 {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Pagination centres on phones, as everywhere else on the site. */
  ._railControls_1q4ue_425 {
    justify-content: center;
    padding-inline: 20px;
  }

  ._intro_1q4ue_313 {
    padding-left: 20px;
    padding-right: 20px;
  }

  ._railHead_1q4ue_377,
  ._railTrack_1q4ue_404 {
    padding-inline: 20px;
  }

  ._railCard_1q4ue_431 {
    width: 86%;
  }

  ._statRow_1q4ue_274 {
    grid-template-columns: 1fr;
  }

  ._statCard_1q4ue_284 {
    min-height: 0;
    gap: 16px;
  }

  ._pillarCard_1q4ue_603 {
    padding: 20px;
  }

  ._pillarPhoto_1q4ue_677 {
    height: 220px;
  }

  ._pillarActions_1q4ue_669 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  ._faqButton_1q4ue_745 {
    font-size: 15px;
    line-height: 22px;
  }

  ._faqAnswer_1q4ue_821 {
    font-size: 14px;
  }
}
._page_reu7j_1 {
  padding: 110px var(--gutter) 0;
  background: var(--surface);
}

._inner_reu7j_6 {
  max-width: var(--content);
  margin-inline: auto;
}

._back_reu7j_11 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
}

._back_reu7j_11:hover {
  color: var(--ink);
}

/* ---------- Lead media ---------- */

._media_reu7j_28 {
  position: relative;
  height: 480px;
  border-radius: 24px;
  overflow: hidden;
}

._mediaImage_reu7j_35 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._tags_reu7j_41 {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
}

._tag_reu7j_41 {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.88);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 12px;
}

._tagStatus_reu7j_60 {
  color: var(--blue);
}

._tagReady_reu7j_64 {
  color: var(--yellow);
}

/* ---------- Header ---------- */

._header_reu7j_70 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 0 0;
}

._location_reu7j_78 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

._locationDot_reu7j_89 {
  width: 4px;
  height: 4px;
}

._name_reu7j_94 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  color: var(--ink);
}

/* ---------- Body ---------- */

._body_reu7j_104 {
  display: flex;
  gap: 60px;
  padding: 40px 0 var(--section-pad);
}

._details_reu7j_110 {
  flex: 1 0 0;
  min-width: 0;
}

._blurb_reu7j_115 {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 24px;
  color: var(--muted-mid);
  max-width: 620px;
  margin-bottom: 32px;
}

._featuresTitle_reu7j_124 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

._feature_reu7j_124 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  max-width: 480px;
}

._feature_reu7j_124:last-of-type {
  border-bottom: 0;
}

._featureDot_reu7j_150 {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--yellow);
  flex: none;
}

._gallery_reu7j_158 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}

._video_reu7j_165 {
  position: relative;
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

._videoEl_reu7j_174 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._videoTag_reu7j_180 {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.75);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #fff;
  pointer-events: none;
}

._galleryItem_reu7j_195 {
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
}

._galleryImage_reu7j_201 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Sticky facts card ---------- */

._aside_reu7j_209 {
  width: 380px;
  flex: none;
}

._facts_reu7j_214 {
  position: sticky;
  /* Clears the docked nav plus the tab bar — at 96 the bar sat over its top
     edge and clipped the first row. */
  top: calc(var(--nav-docked-h) + 45px + 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 24px;
  background: var(--surface-alt);
}

/* A grid rather than space-between: the label column is fixed so a value that
   runs to a full sentence wraps inside its own column instead of pushing the
   row wider than the panel. */
._factRow_reu7j_230 {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

._factLabel_reu7j_239 {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
}

._factValue_reu7j_245 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

/* The price only. */
._factValueLead_reu7j_256 {
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
}

._factsNote_reu7j_262 {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

._factsCtas_reu7j_269 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 1000px) {
  ._body_reu7j_104 {
    flex-direction: column;
    gap: 36px;
  }

  ._aside_reu7j_209 {
    width: 100%;
  }

  ._facts_reu7j_214 {
    position: static;
  }
}

@media (max-width: 760px) {
  /* 20px is the site's phone gutter — this page was the one outlier at 16,
     so its content sat a few pixels off everything else, the docked nav
     included. */
  ._page_reu7j_1 {
    padding: 96px 20px 0;
  }

  ._media_reu7j_28 {
    height: 260px;
    border-radius: 16px;
  }

  ._header_reu7j_70 {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
  }

  ._gallery_reu7j_158 {
    grid-template-columns: 1fr;
  }

  ._galleryItem_reu7j_195 {
    height: 220px;
  }
}

/* ---------- Tabs ---------- */

._dockSentinel_reu7j_321 {
  height: 0;
}

._tabs_reu7j_325 {
  position: sticky;
  /* Meets the nav where it collapses to, so the two read as one bar. */
  top: var(--nav-docked-h);
  /* Under the nav (60) so the mega-menu still opens over it. */
  z-index: 50;
  display: flex;
  gap: 4px;
  margin: 32px 0 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: padding 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out);
  overflow-x: auto;
  scrollbar-width: none;
}

._tabs_reu7j_325::-webkit-scrollbar {
  display: none;
}

/* Docked: breaks its column to run edge to edge under the nav, and carries
   the shadow for the pair. The inset is restored as padding so the tabs stay
   on the content column. */
._tabsDocked_reu7j_348 {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  box-shadow: 0 12px 40px rgba(17, 17, 17, 0.08);
}

._tab_reu7j_325 {
  position: relative;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.28s var(--ease-out);
}

._tab_reu7j_325:hover {
  color: var(--ink);
}

._tabOn_reu7j_371 {
  color: var(--ink);
}

._tabUnderline_reu7j_375 {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

/* Sections stack down the page; the tab bar scrolls to them. */
._panel_reu7j_386 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-margin-top: 96px;
}

._panel_reu7j_386 + ._panel_reu7j_386 {
  padding-top: 44px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}

._panelTitle_reu7j_399 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}

._panelNote_reu7j_406 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

/* ---------- Overview ---------- */

._factGrid_reu7j_415 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

._factTile_reu7j_421 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface-alt);
}

._factTileLabel_reu7j_430 {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}

._factTileValue_reu7j_436 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

/* ---------- Gallery ---------- */

/* Renders and site photos must not read the same. */
._mediaTag_reu7j_446 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 40px;
  background: var(--surface-alt);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
}

._mediaTagPhoto_reu7j_459 {
  background: #cae6dc;
  color: #12513c;
}

._lightbox_reu7j_464 {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-alt);
  cursor: zoom-in;
}

/* Only announces itself on approach — the image is the subject. */
._expandHint_reu7j_476 {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}

._lightbox_reu7j_464:hover ._expandHint_reu7j_476,
._lightbox_reu7j_464:focus-visible ._expandHint_reu7j_476,
._planWrap_reu7j_499:hover ._expandHint_reu7j_476,
._planWrap_reu7j_499:focus-visible ._expandHint_reu7j_476 {
  opacity: 1;
  transform: translateY(0);
}

._lightboxImage_reu7j_505 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._thumbs_reu7j_511 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

._thumb_reu7j_511 {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.28s var(--ease-out);
}

._thumb_reu7j_511:hover {
  opacity: 0.85;
}

._thumbOn_reu7j_529 {
  opacity: 1;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

._thumbImage_reu7j_535 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._planGrid_reu7j_541 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

._planWrap_reu7j_499 {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  /* Plans are line drawings — white ground keeps them legible. */
  background: #fff;
  border: 1px solid var(--line);
  cursor: zoom-in;
}

._planImage_reu7j_559 {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Units ---------- */

._unitList_reu7j_567 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._unit_reu7j_567 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: var(--surface-alt);
}

._unitHead_reu7j_582 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

._unitType_reu7j_589 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

._unitPrice_reu7j_596 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
}

._unitMeta_reu7j_603 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
}

._unitAvail_reu7j_612 {
  color: var(--green);
}

/* ---------- Location ---------- */

._locBig_reu7j_618 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ink);
}

._mapWrap_reu7j_625 {
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-alt);
}

._mapFrame_reu7j_631 {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

/* The nav collapses at every width now, so the tabs dock to it on phones too
   — same flush, square, edge-to-edge bar as on a desktop. Sizing for narrow
   screens lives in the 760px block below. */

@media (max-width: 620px) {
  /* Two to a row squeezed longer values — "Sable and Grey Real Estate" broke
     across three lines in half a phone column. One per row here. */
  ._factGrid_reu7j_415 {
    grid-template-columns: minmax(0, 1fr);
  }

  ._factTile_reu7j_421 {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  ._factTileValue_reu7j_436 {
    text-align: right;
  }
}

@media (max-width: 760px) {
  ._mapFrame_reu7j_631 {
    height: 280px;
  }

  /* First tab flush with the gutter, so the row starts where the content
     does instead of a tab's padding inside it. */
  ._tab_reu7j_325 {
    padding: 12px 14px;
    font-size: 14px;
  }

  ._tabs_reu7j_325 {
    margin-left: -14px;
    margin-right: -14px;
  }

  ._tabsDocked_reu7j_348 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50% - 14px);
    padding-right: calc(50vw - 50% - 14px);
  }
}

/* ---------- Expanded viewer ---------- */

._viewer_reu7j_688 {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  /* minmax(0,1fr) so the image row can actually shrink; a plain 1fr is
     content-sized and let tall images run off the bottom. */
  grid-template-rows: 64px minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  background: rgba(12, 12, 12, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: zoom-out;
}

._viewerBar_reu7j_705 {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 22px;
}

._viewerTitle_reu7j_715 {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: #fff;
}

._viewerCount_reu7j_725 {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

._viewerClose_reu7j_730,
._viewerNav_reu7j_731 {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background 0.24s var(--ease-out);
}

._viewerClose_reu7j_730:hover,
._viewerNav_reu7j_731:hover {
  background: rgba(255, 255, 255, 0.22);
}

._viewerPrev_reu7j_748 {
  grid-column: 1;
  grid-row: 2;
}

._viewerNext_reu7j_753 {
  grid-column: 3;
  grid-row: 2;
}

._viewerImage_reu7j_758 {
  grid-column: 2;
  grid-row: 2;
  background: #fff;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  cursor: default;
}

._viewerRail_reu7j_771 {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  gap: 8px;
  max-width: 100%;
  padding: 18px 22px 22px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: default;
}

._viewerRail_reu7j_771::-webkit-scrollbar {
  display: none;
}

._viewerThumb_reu7j_787 {
  width: 78px;
  height: 56px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.42;
  transition: opacity 0.24s var(--ease-out);
}

._viewerThumb_reu7j_787:hover {
  opacity: 0.75;
}

._viewerThumbOn_reu7j_801 {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  ._viewer_reu7j_688 {
    grid-template-columns: 52px 1fr 52px;
  }

  ._viewerImage_reu7j_758 {
    border-radius: 10px;
  }

  ._viewerThumb_reu7j_787 {
    width: 62px;
    height: 46px;
  }
}


/* ---------- Nearby places (Location) ---------- */

._nearbyTitle_reu7j_825 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  margin-top: 34px;
  margin-bottom: 6px;
}

._nearby_reu7j_825 {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Category, place, distance — the outer two columns sized to their content so
   the names all start on the same line however long the labels run. */
._nearbyRow_reu7j_842 {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

._nearbyRow_reu7j_842:last-child {
  border-bottom: 0;
}

._nearbyCategory_reu7j_855 {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
}

._nearbyName_reu7j_861 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 22px;
  color: var(--ink);
}

._nearbyDistance_reu7j_869 {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
}

._nearbyNote_reu7j_876 {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  margin-top: 12px;
}

@media (max-width: 620px) {
  ._nearbyRow_reu7j_842 {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
  }

  /* The category becomes a caption above the name rather than a first column
     that would squeeze both. */
  ._nearbyCategory_reu7j_855 {
    grid-column: 1 / -1;
    font-size: 12px;
  }
}
/* ---------- Request Demo — split contact-panel wizard ---------- */

._page_1rp2y_3 {
  padding: 140px var(--gutter) var(--section-pad);
  background: var(--surface);
}

/* ---------- Page head ---------- */

._pageHead_1rp2y_10 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 36px;
  text-align: center;
}

._pageTitle_1rp2y_20 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 2.9vw, 42px);
  line-height: 1.16;
  color: var(--ink);
}

._pageSub_1rp2y_28 {
  max-width: 560px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

._shell_1rp2y_36 {
  display: flex;
  align-items: stretch;
  max-width: 800px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

/* ---------- Form panel ---------- */

/* Even padding on all four sides; the content fills the remaining width. */
._panel_1rp2y_50 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  padding: 40px;
}

._panelInner_1rp2y_57 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

/* ---------- Stepper (sits above the card) ---------- */

/* Lives inside the card now, so it sits full width above the question and
   is separated by a rule rather than by the gap to a floating element. */
._stepper_1rp2y_68 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

/* Phone-only header: the step you are on and how far in you are. */
._stepMeta_1rp2y_79 {
  display: none;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

._stepMetaLabel_1rp2y_86 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

._stepMetaCount_1rp2y_93 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

._stepDots_1rp2y_101 {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

._stepDotCell_1rp2y_107 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

._stepDot_1rp2y_101 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.12);
  cursor: pointer;
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out),
    transform 0.2s var(--ease-out);
}

._stepDot_1rp2y_101:not(:disabled):hover {
  transform: scale(1.15);
}

._stepDot_1rp2y_101:disabled {
  cursor: default;
}

._stepDotDone_1rp2y_133 {
  background: var(--ink);
}

._stepDotOn_1rp2y_137 {
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(236, 189, 9, 0.22);
}

._stepLabel_1rp2y_142 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s var(--ease-out);
}

._stepLabelOn_1rp2y_152 {
  font-weight: 700;
  color: var(--ink);
}

._stepTrack_1rp2y_157 {
  height: 4px;
  border-radius: 2px;
  background: rgba(17, 17, 17, 0.08);
  overflow: hidden;
}

._stepFill_1rp2y_164 {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--yellow);
}

._stepCaption_1rp2y_171 {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

._stepWrap_1rp2y_179 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* The chosen role, carried into every following step. */
._roleBadge_1rp2y_186 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 7px 8px 7px 12px;
  border-radius: 999px;
  background: var(--surface-alt);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
}

._roleBadgeIcon_1rp2y_201 {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

._roleBadgeIcon_1rp2y_201 svg {
  width: 15px;
  height: 15px;
}

._roleBadgeChange_1rp2y_213 {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}

._roleBadgeChange_1rp2y_213:hover {
  color: var(--ink);
}

._headBlock_1rp2y_229 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._question_1rp2y_235 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--ink);
}

._questionSub_1rp2y_242 {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 21px;
  color: var(--muted);
}

._stepBody_1rp2y_249 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- Fields ---------- */

._field_1rp2y_257 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._q_1rp2y_235 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}

._input_1rp2y_270 {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-alt);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s var(--ease-out);
}

._input_1rp2y_270::placeholder {
  color: var(--muted);
}

._input_1rp2y_270:focus {
  background: var(--surface);
  border-color: var(--ink);
}

._textarea_1rp2y_293 {
  min-height: 88px;
  resize: vertical;
}

._row3_1rp2y_298 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

._row2_1rp2y_304 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ---------- Choice cards (radio / check) ---------- */

._choiceGrid_1rp2y_312 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Grey fill and generous radius, matching the bento and insight cards. */
._choice_1rp2y_312 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-radius: 16px;
  background: var(--surface-alt);
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

._choice_1rp2y_312:hover {
  background: #ededed;
}

._choiceOn_1rp2y_337 {
  background: var(--surface);
  border-color: var(--ink);
}

._choiceLabel_1rp2y_342 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--ink);
}

/* Radio indicator — ring that fills with a dot when selected. */
/* The unselected ring was drawn in --line (#ebebeb) and all but vanished, so
   the cards did not read as a choice. Dark enough to see, light enough not to
   compete with the selected state. */
._radio_1rp2y_354 {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(17, 17, 17, 0.28);
  background: var(--surface);
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

._roleCard_1rp2y_366:hover ._radio_1rp2y_354,
._choice_1rp2y_312:hover ._radio_1rp2y_354 {
  border-color: rgba(17, 17, 17, 0.55);
}

._radioDot_1rp2y_371 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

._choiceOn_1rp2y_337 ._radio_1rp2y_354,
._roleCardOn_1rp2y_382 ._radio_1rp2y_354 {
  border-color: var(--ink);
}

._choiceOn_1rp2y_337 ._radioDot_1rp2y_371,
._roleCardOn_1rp2y_382 ._radioDot_1rp2y_371 {
  opacity: 1;
  transform: scale(1);
}

/* Check indicator for multi-selects. */
._check_1rp2y_393 {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  font-size: 11px;
  color: transparent;
  transition: all 0.2s var(--ease-out);
}

._choiceOn_1rp2y_337 ._check_1rp2y_393 {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- Role cards ---------- */

._roleGrid_1rp2y_414 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Same language as the home bento cards: grey fill, 24px corners, an icon
   holder that reads as a white chip once the card is picked. */
._roleCard_1rp2y_366 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 22px;
  border-radius: 24px;
  background: var(--surface-alt);
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
}

._roleCard_1rp2y_366:hover {
  background: #ededed;
  transform: translateY(-2px);
}

._roleCardOn_1rp2y_382 {
  background: var(--surface);
  border-color: var(--ink);
  transform: none;
}

._roleTop_1rp2y_448 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

/* No disc in either state — the mark carries itself, and a filled circle
   behind it read as a hole punched in the card. Left-aligned with the name
   and note below it. */
._roleIcon_1rp2y_459 {
  display: grid;
  place-items: center start;
  width: 28px;
  height: 28px;
  color: var(--muted);
  transition: color 0.25s var(--ease-out);
}

._roleCard_1rp2y_366:hover ._roleIcon_1rp2y_459 {
  color: var(--ink);
}

/* Brand yellow on the chosen card. It carries little contrast against the
   white selected ground on its own, so it reads as an accent on top of the
   ink border and filled radio rather than as the selection cue itself. */
._roleCardOn_1rp2y_382 ._roleIcon_1rp2y_459 {
  color: var(--yellow);
}

._roleIcon_1rp2y_459 svg {
  width: 26px;
  height: 26px;
}

._roleName_1rp2y_484 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

._roleNote_1rp2y_491 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--muted);
}

/* ---------- Skills ---------- */

._skillList_1rp2y_500 {
  display: flex;
  flex-direction: column;
}

._skillRow_1rp2y_505 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}

._skillName_1rp2y_514 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
}

._stars_1rp2y_521 {
  display: flex;
  gap: 2px;
}

._star_1rp2y_521 {
  font-size: 22px;
  line-height: 1;
  color: rgba(17, 17, 17, 0.15);
  cursor: pointer;
  transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

._star_1rp2y_521:hover {
  transform: scale(1.12);
}

._starOn_1rp2y_538 {
  color: var(--yellow);
}

/* ---------- Declarations ---------- */

._declarations_1rp2y_544 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._declaration_1rp2y_544 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 18px;
  border-radius: 16px;
  background: var(--surface-alt);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 20px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

._declaration_1rp2y_544:hover {
  background: #ededed;
}

._declarationOn_1rp2y_571 {
  background: var(--surface);
  border-color: var(--ink);
}

._declarationBox_1rp2y_576 {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: 11px;
  color: #fff;
  transition: all 0.2s var(--ease-out);
}

._declarationOn_1rp2y_571 ._declarationBox_1rp2y_576 {
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------- Nav + error ---------- */

._hint_1rp2y_598 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
}

._navRow_1rp2y_604 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}

._backBtn_1rp2y_612 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

._backBtn_1rp2y_612:hover {
  border-color: #d4d4d4;
  transform: translateY(-1px);
}


/* ---------- Success ---------- */

._success_1rp2y_636 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
  max-width: 460px;
}

._successMark_1rp2y_645 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 20px;
  margin-bottom: 8px;
}

._successTitle_1rp2y_657 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
}

._successBody_1rp2y_664 {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 22px;
  color: var(--muted-mid);
}

._success_1rp2y_636 ._backBtn_1rp2y_612 {
  margin-top: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  ._panel_1rp2y_50 {
    padding: 28px;
  }
}

@media (max-width: 640px) {
  ._page_1rp2y_3 {
    padding: 110px 16px 48px;
  }

  ._row3_1rp2y_298,
  ._row2_1rp2y_304,
  ._choiceGrid_1rp2y_312,
  ._roleGrid_1rp2y_414 {
    grid-template-columns: 1fr;
  }

  ._skillRow_1rp2y_505 {
    flex-wrap: wrap;
  }

  ._navRow_1rp2y_604 {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Eight labelled dots cannot read at phone width, so the dot row is swapped
     for a step name, a count, and a single thicker progress bar. */
  ._stepDots_1rp2y_101 {
    display: none;
  }

  ._stepMeta_1rp2y_79 {
    display: flex;
  }

  ._stepper_1rp2y_68 {
    gap: 12px;
    margin-bottom: 20px;
  }

  ._stepTrack_1rp2y_157 {
    height: 6px;
    border-radius: 3px;
  }

  /* The fill is measured between dot centres, so it is empty on step one.
     Without the dots to anchor it that reads as a broken bar, hence the nub. */
  ._stepFill_1rp2y_164 {
    border-radius: 3px;
    min-width: 10px;
  }

  /* The meta row already names the step — no need to repeat it below. */
  ._stepCaption_1rp2y_171 {
    display: none;
  }
}
._root_sgqvu_1 {
  position: relative;
  width: 100%;
}

._rootInline_sgqvu_6 {
  width: auto;
  display: inline-flex;
}

/* Field trigger — mirrors the Figma select (725:10135). */
._trigger_sgqvu_12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px 12px 12px 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: var(--surface-alt);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

._trigger_sgqvu_12:hover {
  border-color: #dcdcdc;
}

/* White field variant — for forms that already sit on a white card. */
._triggerOutline_sgqvu_36 {
  padding: 14px;
  border-color: #dadada;
  background: var(--surface);
  color: var(--ink);
}

._triggerOutline_sgqvu_36:hover {
  border-color: #bdbdbd;
}

/* Pill variant — matches the chips and arrow buttons used across the site.
   Declared after the shared open state below so it wins on source order. */

/* Open state echoes the form inputs' yellow focus ring. */
._trigger_sgqvu_12[aria-expanded="true"] {
  border-color: var(--yellow);
  background: var(--surface);
}

/* Pill variant — matches the chips and arrow buttons used across the site. */
._triggerPill_sgqvu_57 {
  padding: 9px 14px 9px 16px;
  border-radius: 999px;
  border-color: transparent;
  font-size: 13px;
}

._triggerPill_sgqvu_57:hover {
  border-color: transparent;
  background: #ececec;
}

/* Open reads like a selected chip rather than a focused form field. */
._triggerPill_sgqvu_57[aria-expanded="true"] {
  border-color: transparent;
  background: var(--ink);
  color: var(--surface);
}

._triggerPill_sgqvu_57[aria-expanded="true"] ._chevron_sgqvu_76 {
  color: var(--surface);
}

/* The trigger is only as wide as its label, so the menu needs its own floor
   or the longer options get clipped. */
._rootPill_sgqvu_82 {
  width: auto;
}

._rootPill_sgqvu_82 ._menu_sgqvu_86 {
  right: auto;
  min-width: max(100%, 168px);
}

._value_sgqvu_91 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._chevron_sgqvu_76 {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--muted);
}

/* Inline text trigger for the sort row. */
._triggerInline_sgqvu_105 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

._triggerInline_sgqvu_105 ._chevron_sgqvu_76 {
  color: var(--ink);
}

._menu_sgqvu_86 {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(17, 17, 17, 0.08);
  max-height: 288px;
  overflow-y: auto;
  transform-origin: top center;
}

._rootInline_sgqvu_6 ._menu_sgqvu_86 {
  left: auto;
  right: 0;
  min-width: 190px;
}

._option_sgqvu_144 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

._option_sgqvu_144:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

._optionActive_sgqvu_167 {
  color: var(--ink);
}

._dot_sgqvu_171 {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--yellow);
}
/* ============================================================
   Mortgage calculator — form on the left, live result panel on
   the right. Same envelope as the rest of the site: white cards,
   24px radii, pill controls, display face for the figures.
   ============================================================ */

/* ---------- Section header ---------- */

._head_9r6oe_9 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--content);
  margin: 0 auto 44px;
}

._badge_9r6oe_17 {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 6px 12px;
  border-radius: 40px;
  background: #eee;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgba(17, 17, 17, 0.4);
}

._title_9r6oe_31 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.639vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
}

._sub_9r6oe_40 {
  max-width: 560px;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Board ---------- */

._shell_9r6oe_50 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface);
  scroll-margin-top: var(--nav-h);
}

._board_9r6oe_56 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 24px;
  max-width: var(--content);
  margin-inline: auto;
}

/* ---------- Form ---------- */

._form_9r6oe_67 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 32px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Employed / self-employed switch, same language as the site's chips. */
._segment_9r6oe_79 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-alt);
}

._segmentBtn_9r6oe_88 {
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--muted);
  transition: background 0.28s var(--ease-out), color 0.28s var(--ease-out);
}

._segmentBtn_9r6oe_88:hover {
  color: var(--ink);
}

._segmentBtnOn_9r6oe_102,
._segmentBtnOn_9r6oe_102:hover {
  background: var(--ink);
  color: var(--surface);
}

._field_9r6oe_108 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

._fieldRow_9r6oe_115 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._label_9r6oe_121 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
}

._labelRow_9r6oe_128 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

._labelValue_9r6oe_135 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

._inputWrap_9r6oe_142 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-alt);
  transition: box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

._inputWrap_9r6oe_142:focus-within {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ink);
}

._prefix_9r6oe_157 {
  flex: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
}

._input_9r6oe_142 {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}

/* Strip the spinner so numeric fields match the text ones. */
._input_9r6oe_142[type="number"]::-webkit-outer-spin-button,
._input_9r6oe_142[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

._input_9r6oe_142[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ---------- Range ---------- */

._range_9r6oe_190 {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

._range_9r6oe_190::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 6px rgba(17, 17, 17, 0.3);
  cursor: pointer;
}

._range_9r6oe_190::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 6px rgba(17, 17, 17, 0.3);
  cursor: pointer;
}

._range_9r6oe_190:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}

/* ---------- Rate readout ---------- */

._rateBar_9r6oe_229 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--surface-alt);
}

._rateValue_9r6oe_239 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}

._rateNote_9r6oe_246 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- Grouped blocks ---------- */

._group_9r6oe_254 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

._groupHead_9r6oe_262 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._groupIcon_9r6oe_268 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

._groupTitle_9r6oe_275 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

._groupNote_9r6oe_282 {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

._hint_9r6oe_289 {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Switch ---------- */

._switchRow_9r6oe_298 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

._switchRow_9r6oe_298 input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

._switchTrack_9r6oe_313 {
  position: relative;
  width: 34px;
  height: 20px;
  flex: none;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.28s var(--ease-out);
}

._switchKnob_9r6oe_323 {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.3);
  transition: transform 0.28s var(--ease-out);
}

._switchRow_9r6oe_298 input:checked + ._switchTrack_9r6oe_313 {
  background: var(--green);
}

._switchRow_9r6oe_298 input:checked + ._switchTrack_9r6oe_313 ._switchKnob_9r6oe_323 {
  transform: translateX(14px);
}

._switchRow_9r6oe_298 input:focus-visible + ._switchTrack_9r6oe_313 {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* ---------- Results ---------- */

._results_9r6oe_350 {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  min-height: 420px;
  padding: 32px;
  border-radius: 24px;
  background: var(--surface-alt);
}

._empty_9r6oe_359 {
  display: grid;
  place-items: center;
  min-height: 356px;
  text-align: center;
}

._empty_9r6oe_359 p {
  max-width: 320px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

._empty_9r6oe_359 strong {
  color: var(--ink);
  font-weight: 600;
}

._resultInner_9r6oe_379 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

._resultLabel_9r6oe_386 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
}

._resultValue_9r6oe_393 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.3vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

._verdict_9r6oe_402 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
}

._verdictOk_9r6oe_412 {
  background: rgba(52, 163, 126, 0.14);
  color: #1f6f54;
}

._verdictOver_9r6oe_417 {
  background: rgba(240, 71, 71, 0.12);
  color: #b02a2a;
}

._verdictNote_9r6oe_422 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

._breakdown_9r6oe_429 {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

._breakdownRow_9r6oe_437 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--muted);
}

._breakdownValue_9r6oe_449 {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

._rsaNote_9r6oe_456 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

._resultCta_9r6oe_463 {
  margin-top: 4px;
}

._disclaimer_9r6oe_467 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  ._board_9r6oe_56 {
    grid-template-columns: 1fr;
  }

  /* The panel can't stick once it sits under the form. */
  ._results_9r6oe_350 {
    position: static;
    min-height: 0;
  }

  ._empty_9r6oe_359 {
    min-height: 200px;
  }
}

@media (max-width: 620px) {
  ._shell_9r6oe_50 {
    padding-left: 20px;
    padding-right: 20px;
  }

  ._form_9r6oe_67,
  ._results_9r6oe_350 {
    padding: 20px;
  }

  ._fieldRow_9r6oe_115 {
    grid-template-columns: 1fr;
  }
}
/* ---------- Hero (745:11630) ---------- */

._hero_5zck0_3 {
  position: relative;
  display: flex;
  align-items: center;
  /* Full viewport on every screen; svh so mobile browser chrome doesn't
     push the content out of view. */
  min-height: 100svh;
  padding: 140px var(--gutter) 80px;
  background: var(--surface-alt);
  overflow: hidden;
}

/* Faint blue diagonals from the comp (746:13593). Rebuilt as a gradient
   rather than the 143-line SVG export, then masked so the lines crowd the
   bottom-left and right edge and clear the middle, as the design does. */
._heroPattern_5zck0_18 {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    124deg,
    rgba(83, 180, 234, 0) 0 20px,
    rgba(83, 180, 234, 0.15) 20px 22px
  );
  mask-image: radial-gradient(
      ellipse 55% 45% at 8% 92%,
      #000 0%,
      transparent 100%
    ),
    radial-gradient(ellipse 40% 60% at 100% 40%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(
      ellipse 55% 45% at 8% 92%,
      #000 0%,
      transparent 100%
    ),
    radial-gradient(ellipse 40% 60% at 100% 40%, #000 0%, transparent 100%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
  animation: _drift_5zck0_1 24s linear infinite;
}

/* Slides one band-width along the line direction, so the loop is seamless. */
@keyframes _drift_5zck0_1 {
  to {
    background-position: 22px -22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._heroPattern_5zck0_18 {
    animation: none;
  }
}

._heroInner_5zck0_58 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

._heroCopy_5zck0_69 {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

._badge_5zck0_78,
._badgeWhite_5zck0_79 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 40px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: rgba(17, 17, 17, 0.4);
  white-space: nowrap;
}

/* Grey pill on white sections, white pill on the grey ones. */
._badge_5zck0_78 {
  background: #eee;
}

._badgeWhite_5zck0_79 {
  background: var(--surface);
}

._title_5zck0_102 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.15;
  color: var(--ink);
}

._line_5zck0_110 {
  display: block;
  overflow: hidden;
}

._lineInner_5zck0_115 {
  display: block;
}

._sub_5zck0_119 {
  max-width: 540px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
}

._heroCtas_5zck0_127 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

._heroMedia_5zck0_133 {
  flex: 0 0 645px;
  /* 645x728 in the comp, but capped so it always fits the viewport the hero
     now fills — the video covers whatever crop that leaves. */
  aspect-ratio: 645 / 728;
  max-height: min(728px, calc(100svh - 240px));
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
}

._heroVideo_5zck0_144 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Stats (745:11677) ---------- */

._stats_5zck0_153 {
  padding: 80px var(--gutter);
  background: var(--surface);
}

._statsRow_5zck0_158 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content);
  margin-inline: auto;
}

/* Same treatment as the landing stats: tall grey tile, coloured figure. */
._statCard_5zck0_167 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 195px;
  padding: 15px;
  border-radius: 24px;
  background: var(--surface-alt);
}

._statValue_5zck0_177 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36.375px;
  line-height: 46.8px;
}

._statLabel_5zck0_184 {
  font-family: var(--font-sans);
  font-size: 14.1px;
  line-height: 21px;
  color: #212121;
}

/* ---------- Section shell ---------- */

._section_5zck0_193,
._sectionAlt_5zck0_194 {
  padding: var(--section-pad) var(--gutter);
}

._section_5zck0_193 {
  background: var(--surface);
}

._sectionAlt_5zck0_194 {
  background: var(--surface-alt);
}

._sectionInner_5zck0_206 {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: var(--content);
  margin-inline: auto;
}

._sectionHead_5zck0_214 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

._sectionTitle_5zck0_222 {
  max-width: 800px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.22;
  color: var(--ink);
}

._sectionSub_5zck0_231 {
  max-width: 468px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Workflow steps (745:11688) ---------- */

._stepGrid_5zck0_241 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

._stepCard_5zck0_247 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 24px;
  background: var(--surface-alt);
}

._stepNum_5zck0_256 {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--yellow);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

._stepTitle_5zck0_269 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}

._stepBody_5zck0_276 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

/* ---------- Spotlight carousel (745:12334) ----------
   Figures taken from the comp: 1152 viewport, 979.195 slide on a 986.695
   pitch (7.5 gap), 535.98 tall, 7.5 padding, 22.5 radius. */

._spotWrap_5zck0_287 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 1152px;
  margin-inline: auto;
}

/* The active slide is centred and the rail stretches out to both viewport
   edges (negative margins set in JS, matched by padding so the content column
   stays put) and clips there. That shows the neighbouring slides without the
   cards extending the document and scrolling the page sideways. */
._spotViewport_5zck0_300 {
  overflow: hidden;
}

._spotRail_5zck0_304 {
  display: flex;
  gap: 7.5px;
  cursor: grab;
}

._spotRail_5zck0_304:active {
  cursor: grabbing;
}

._spotCard_5zck0_314 {
  display: flex;
  align-items: center;
  /* 979.195 of the 1152 viewport. */
  flex: 0 0 85%;
  min-width: 0;
  height: 535.98px;
  padding: 7.5px;
  border-radius: 22.5px;
  background: var(--surface);
  overflow: hidden;
}

/* 452.098 of the card's 964.195 inner width; the copy takes the rest.
   Sized off the basis, not flex-grow, so the copy's padding cannot skew it. */
._spotPhoto_5zck0_329 {
  flex: 0 0 46.888%;
  min-width: 0;
  align-self: stretch;
  border-radius: 15px;
  overflow: hidden;
}

._spotImage_5zck0_337 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

._spotContent_5zck0_345 {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
  padding: 7.5px 30px;
  overflow: hidden;
}

._spotHeadline_5zck0_357 {
  max-width: 600px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 25.125px;
  line-height: 31.5px;
  color: var(--ink);
}

._spotBody_5zck0_366 {
  max-width: 487.5px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.175px;
  line-height: 21px;
  color: var(--muted);
}

._spotStats_5zck0_375 {
  display: flex;
  gap: 32px;
  white-space: nowrap;
}

._spotStats_5zck0_375 > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

._spotValue_5zck0_387 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
}

._spotLabel_5zck0_393 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}

/* 6px dots on a 13.5px pitch, as drawn — same size throughout. */
._spotDots_5zck0_401 {
  display: flex;
  justify-content: center;
}

/* ---------- Console panel (745:11719) ---------- */

._panelWrap_5zck0_408 {
  display: flex;
  justify-content: center;
}

/* White card with an outline and grey stat tiles (745:11724). */
._console_5zck0_414 {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid #e8e8e8;
}

._consoleHead_5zck0_426 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._consoleTitleWrap_5zck0_433 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Live-status dot. `flex: none` or the row squeezes it into an oval once the
   title has to share the width with the token tag. */
._consoleDot_5zck0_441 {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
}

._consoleTitle_5zck0_433 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}

._consoleTag_5zck0_456 {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface-alt);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

._consoleRows_5zck0_467 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

._consoleRow_5zck0_467 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  background: var(--surface-alt);
}

._consoleLabel_5zck0_482 {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
}

._consoleValue_5zck0_488 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
}

._consoleNote_5zck0_496 {
  font-family: var(--font-sans);
  font-size: 11px;
}

/* ---------- Affordability calculator (745:12971) ----------
   One outlined white card, 1100 wide: three grey fields on the left, the
   dark 400px result panel on the right. */

._calc_5zck0_505 {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1100px;
  padding: 32px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid #e8e8e8;
}

._calcFields_5zck0_517 {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
}

._calcField_5zck0_517 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

._calcLabel_5zck0_532 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}

._calcInput_5zck0_539 {
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface-alt);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s var(--ease-out);
}

._calcInput_5zck0_539:focus {
  border-color: var(--ink);
}

._calcResult_5zck0_557 {
  display: flex;
  flex: 0 0 400px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  border-radius: 16px;
  background: #1c1c1c;
}

._calcResultLabel_5zck0_568 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  opacity: 0.8;
}

._calcResultValue_5zck0_576 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.1;
  color: var(--yellow);
}

._calcRule_5zck0_584 {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

._calcMeta_5zck0_590 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

._calcMeta_5zck0_590 > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

._calcMetaLabel_5zck0_604 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: #fff;
  opacity: 0.6;
}

._calcMetaValue_5zck0_612 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}

/* ---------- Tiers (745:11744) ---------- */

/* auto-fit rather than a fixed three, so a section with two offerings fills
   the row instead of leaving a third column empty. */
._tierGrid_5zck0_623 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

._tierCard_5zck0_629 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 24px;
  background: var(--surface-alt);
}

._tierCardFeatured_5zck0_638 {
  background: #1c1c1c;
}

._tierName_5zck0_642 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}

/* Sits tight under the name — the card's 24px gap is meant for the blocks,
   not for a name and its own qualifier. */
._tierRole_5zck0_651 {
  margin-top: -16px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

._tierFigure_5zck0_660 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 36px);
  color: #212121;
  margin-top: -16px;
}

._tierBody_5zck0_668 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

._tierCardFeatured_5zck0_638 ._tierName_5zck0_642 {
  color: #fff;
}

._tierCardFeatured_5zck0_638 ._tierRole_5zck0_651 {
  color: var(--yellow);
}

._tierCardFeatured_5zck0_638 ._tierFigure_5zck0_660 {
  color: var(--yellow);
}

._tierCardFeatured_5zck0_638 ._tierBody_5zck0_668 {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  ._heroInner_5zck0_58 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._heroMedia_5zck0_133 {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: min(420px, 42svh);
  }

  ._stepGrid_5zck0_241 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._calc_5zck0_505 {
    flex-direction: column;
    align-items: stretch;
  }

  ._calcResult_5zck0_557 {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 860px) {
  ._statsRow_5zck0_158,
  ._tierGrid_5zck0_623 {
    grid-template-columns: 1fr;
  }

  ._consoleRows_5zck0_467 {
    grid-template-columns: 1fr;
  }

  /* Side by side the title wrapped to three lines; the tag drops below it. */
  ._consoleHead_5zck0_426 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  ._hero_5zck0_3 {
    padding: 110px 20px 40px;
  }

  ._stats_5zck0_153,
  ._section_5zck0_193,
  ._sectionAlt_5zck0_194 {
    padding-left: 20px;
    padding-right: 20px;
  }

  ._sectionInner_5zck0_206 {
    gap: 40px;
  }

  ._stepGrid_5zck0_241 {
    grid-template-columns: 1fr;
  }

  /* Tightened so the stacked hero still lands inside one viewport. */
  ._heroInner_5zck0_58 {
    gap: 32px;
  }

  ._heroCopy_5zck0_69 {
    gap: 18px;
  }

  ._heroMedia_5zck0_133 {
    aspect-ratio: 4 / 3;
    max-height: 28svh;
  }

  /* Both pills share one line and split the width, rather than wrapping to
     two ragged rows at their natural widths. */
  ._heroCtas_5zck0_127 {
    width: 100%;
    gap: 10px;
    flex-wrap: nowrap;
  }

  ._heroCtas_5zck0_127 > * {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  ._calc_5zck0_505,
  ._calcResult_5zck0_557 {
    padding: 22px 18px;
  }

  ._spotlightStats_5zck0_792 {
    gap: 28px;
  }
}

/* Very short viewports: give the media the squeeze rather than the copy. */
@media (max-height: 720px) {
  ._hero_5zck0_3 {
    padding-top: 104px;
    padding-bottom: 32px;
  }

  ._heroMedia_5zck0_133 {
    max-height: min(728px, calc(100svh - 200px));
  }
}

/* Too narrow to sit side by side — full width, stacked. */
@media (max-width: 400px) {
  ._heroCtas_5zck0_127 {
    gap: 8px;
  }
}

@media (max-width: 860px) {
  /* No room for the split at this width — image over copy, and the card
     grows to its content instead of holding the comp's fixed height. */
  /* The pair fills the card's width exactly at this size, so the second stat
     sits hard against the edge — it goes on its own line instead. */
  ._spotStats_5zck0_375 {
    flex-direction: column;
    gap: 14px;
  }

  ._spotCard_5zck0_314 {
    /* Narrower than the viewport so the neighbouring slides peek on both
       sides, matching the desktop bleed. */
    flex: 0 0 86%;
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  ._spotPhoto_5zck0_329 {
    flex: none;
    height: 240px;
  }

  ._spotContent_5zck0_345 {
    flex: none;
    padding: 24px 22px 10px;
  }

  ._spotHeadline_5zck0_357 {
    font-size: 21px;
    line-height: 27px;
  }
}


/* Byline under a quoted spotlight slide. */
._spotAttribution_5zck0_853 {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
/* ---------- Hero + form block (725:9117) ---------- */

/* Hero and form sit in one frame in the comp, with the diagonals running
   behind both. Same treatment as the role page heroes. */
._top_1u1b3_5 {
  position: relative;
  background: var(--surface-alt);
  overflow: hidden;
}

._pattern_1u1b3_11 {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    124deg,
    rgba(83, 180, 234, 0) 0 20px,
    rgba(83, 180, 234, 0.15) 20px 22px
  );
  mask-image: radial-gradient(
      ellipse 55% 45% at 8% 92%,
      #000 0%,
      transparent 100%
    ),
    radial-gradient(ellipse 40% 60% at 100% 25%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(
      ellipse 55% 45% at 8% 92%,
      #000 0%,
      transparent 100%
    ),
    radial-gradient(ellipse 40% 60% at 100% 25%, #000 0%, transparent 100%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
  animation: _drift_1u1b3_1 24s linear infinite;
}

@keyframes _drift_1u1b3_1 {
  to {
    background-position: 22px -22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._pattern_1u1b3_11 {
    animation: none;
  }
}

._hero_1u1b3_50 {
  position: relative;
  z-index: 1;
  padding: 158px var(--gutter) 60px;
}

._heroInner_1u1b3_56 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: var(--content);
  margin-inline: auto;
  text-align: center;
}

/* Same hero pill as every other page — white on the grey sections. */
._badge_1u1b3_67 {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 40px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: rgba(17, 17, 17, 0.4);
  white-space: nowrap;
}

._title_1u1b3_82 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.33vw, 48px);
  line-height: 1.16;
  color: var(--ink);
}

._line_1u1b3_90 {
  display: block;
  overflow: hidden;
}

._lineInner_1u1b3_95 {
  display: block;
}

._sub_1u1b3_99 {
  max-width: 680px;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Form + support (725:9122) ---------- */

._formSection_1u1b3_109 {
  position: relative;
  z-index: 1;
  padding: 40px var(--gutter) 80px;
}

/* Held at the comp's 800 + 80 + 400 and centred, so it never spreads out
   on a wide screen — it only shrinks when the viewport forces it. */
._formInner_1u1b3_117 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

._card_1u1b3_127 {
  display: flex;
  flex: 1 1 800px;
  max-width: 800px;
  min-width: 0;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid #dadada;
}

._cardTitle_1u1b3_140 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 1.94vw, 28px);
  color: var(--ink);
}

._field_1u1b3_147 {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

._label_1u1b3_155 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

._input_1u1b3_162 {
  width: 100%;
  padding: 14px;
  border: 1px solid #dadada;
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s var(--ease-out);
}

._input_1u1b3_162::placeholder {
  color: var(--muted);
}

._input_1u1b3_162:focus {
  border-color: var(--ink);
}

._textarea_1u1b3_183 {
  min-height: 100px;
  resize: vertical;
}

._row_1u1b3_188 {
  display: flex;
  gap: 16px;
}

/* Full-width pill, per the design's Link_Button. */
._submit_1u1b3_194 {
  width: 100%;
}

/* ---------- Support column (725:9165) ---------- */

._support_1u1b3_200 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 400px;
  padding-top: 8px;
}

._supportBlock_1u1b3_208 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._supportTitle_1u1b3_214 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

._supportBody_1u1b3_221 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

._supportLinks_1u1b3_228 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._supportLinks_1u1b3_228 a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
  transition: opacity 0.25s var(--ease-out);
}

._supportLinks_1u1b3_228 a:hover {
  opacity: 0.7;
}

/* ---------- Success ---------- */

._success_1u1b3_248 {
  align-items: flex-start;
  gap: 10px;
  padding: 48px 40px;
}

._successMark_1u1b3_254 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 20px;
  margin-bottom: 8px;
}

._successTitle_1u1b3_266 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
}

._successBody_1u1b3_273 {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 22px;
  color: var(--muted-mid);
  max-width: 420px;
}

/* ---------- What to expect (725:9172) ---------- */

._expect_1u1b3_283 {
  padding: 80px var(--gutter);
  background: var(--surface);
}

._expectInner_1u1b3_288 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: var(--content);
  margin-inline: auto;
}

._expectHead_1u1b3_296 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

._expectTitle_1u1b3_304 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--ink);
}

._expectSub_1u1b3_311 {
  max-width: 540px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

._expectGrid_1u1b3_319 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

._expectCard_1u1b3_325 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px;
  border-radius: 16px;
  background: var(--surface-alt);
}

._expectCardTitle_1u1b3_334 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

._expectCardBody_1u1b3_341 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  ._formInner_1u1b3_117 {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  ._card_1u1b3_127,
  ._support_1u1b3_200 {
    flex: none;
    width: 100%;
    max-width: 800px;
  }

  ._expectGrid_1u1b3_319 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  ._hero_1u1b3_50 {
    padding: 120px 20px 32px;
  }

  ._formSection_1u1b3_109 {
    padding: 24px 20px 48px;
  }

  ._expect_1u1b3_283 {
    padding-left: 20px;
    padding-right: 20px;
  }

  ._card_1u1b3_127 {
    padding: 24px 20px;
  }

  ._row_1u1b3_188 {
    flex-direction: column;
    gap: 24px;
  }
}
/* Shared shell for Terms and Privacy — a reading column on the page gutter,
   matching the About blocks rather than inventing a new measure. */

._page_l107k_4 {
  padding: 158px var(--gutter) var(--section-pad);
  background: var(--surface);
}

._inner_l107k_9 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--content);
  margin-inline: auto;
}

._badge_l107k_17 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 40px;
  background: #eee;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgba(17, 17, 17, 0.4);
}

._title_l107k_31 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.16;
  color: var(--ink);
}

._updated_l107k_39 {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
}

._intro_l107k_45 {
  max-width: 660px;
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.35vw, 18px);
  line-height: 1.65;
  color: var(--muted-mid);
}

/* Heading left, body right — the same split the About page uses. */
._section_l107k_54 {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 24px 140px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
  margin-top: 20px;
}

._sectionTitle_l107k_63 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: var(--ink);
}

._body_l107k_71 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 660px;
}

._body_l107k_71 p {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.35vw, 18px);
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--muted-mid);
}

._body_l107k_71 ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  list-style: disc;
}

._body_l107k_71 li {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.35vw, 18px);
  line-height: 1.6;
  color: var(--muted-mid);
}

._body_l107k_71 a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1200px) {
  ._section_l107k_54 {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: 72px;
  }
}

@media (max-width: 900px) {
  ._section_l107k_54 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  ._body_l107k_71 {
    max-width: none;
  }
}

@media (max-width: 760px) {
  ._page_l107k_4 {
    padding: 120px 20px var(--section-pad);
  }
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
._map_1xfqx_1 {
  width: 100%;
  height: 100%;
  background: var(--surface-alt);
}

/* ---------- Price pins ---------- */

/* Leaflet anchors the icon at 0,0, so the pin centres itself on the point. */
._pin_1xfqx_10 {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(17, 17, 17, 0.18);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.28s var(--ease-out), background 0.28s var(--ease-out),
    color 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

._pin_1xfqx_10:hover,
._pinActive_1xfqx_31 {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.3);
  z-index: 500;
}

/* Sold stock still shows on the map, but reads as inactive. */
._pinSold_1xfqx_40 {
  background: var(--surface-alt);
  color: var(--muted);
  box-shadow: 0 1px 6px rgba(17, 17, 17, 0.12);
}

._pinSold_1xfqx_40:hover,
._pinSold_1xfqx_40._pinActive_1xfqx_31 {
  background: var(--muted);
  color: var(--surface);
}

/* ---------- Leaflet chrome, restyled to match the site ---------- */

._map_1xfqx_1 .leaflet-container {
  font-family: var(--font-sans);
  background: var(--surface-alt);
}

._map_1xfqx_1 .leaflet-bar {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.16);
}

._map_1xfqx_1 .leaflet-bar a {
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-bottom-color: var(--line);
  color: var(--ink);
  font-weight: 500;
}

._map_1xfqx_1 .leaflet-bar a:hover {
  background: var(--surface-alt);
}
/* ============================================================
   Explore properties — map-bounded search.
   The map viewport is the query: pan it and the list narrows.
   ============================================================ */

._page_3tl39_6 {
  background: var(--surface);
}

/* ---------- Hero (725:10123) ---------- */

._hero_3tl39_12 {
  padding: 158px var(--gutter) 40px;
  background: var(--surface);
}

._heroInner_3tl39_17 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: var(--content);
  margin-inline: auto;
  text-align: center;
}

._badge_3tl39_27 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 40px;
  background: #eee;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: rgba(17, 17, 17, 0.4);
  white-space: nowrap;
}

._badgeDot_3tl39_43 {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
}

._title_3tl39_50 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.47vw, 50px);
  line-height: 1.16;
  color: var(--ink);
}

._line_3tl39_58 {
  display: block;
  overflow: hidden;
}

._lineInner_3tl39_63 {
  display: block;
}

._sub_3tl39_67 {
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 1.11vw, 15px);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Search tool ---------- */

._shell_3tl39_77 {
  /* Filter card height plus its gap, so map view can size itself to the
     remaining viewport. */
  --filter-h: 74px;
  display: flex;
  flex-direction: column;
}

/* ---------- Filter bar ---------- */

/* Deliberately in flow, not sticky. The nav is already a floating overlay and
   a second persistent layer under it reads as clutter; with a result set this
   size the controls are never out of reach anyway. If the inventory ever
   outgrows a couple of screens, the answer is a single compact "Filters" pill
   that appears on scroll — not a second bar. */
/* Zero-height marker the observer watches; it crosses the dock line one
   frame before the bar itself would stick. */
._dockSentinel_3tl39_94 {
  height: 0;
}

._filterBar_3tl39_98 {
  position: sticky;
  top: var(--nav-docked-h);
  /* Under the nav (60), so the mega-menu still opens over the bar. */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex: none;
  margin: 0 var(--shell-gutter);
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  transition: margin 0.34s var(--ease-out), padding 0.34s var(--ease-out),
    border-radius 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out);
}

/* Docked: gives up the inset and the radius so it meets the nav above it as
   one continuous header, and carries the shadow for the pair. */
._filterBarDocked_3tl39_118 {
  margin: 0;
  padding: 12px var(--shell-gutter);
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(17, 17, 17, 0.08);
}

._barLeft_3tl39_126 {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* ---------- Search field ---------- */

._search_3tl39_135 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 268px;
  padding: 9px 12px 9px 14px;
  border-radius: 999px;
  background: var(--surface-alt);
  transition: background 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

._search_3tl39_135:focus-within {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ink);
}

._searchIcon_3tl39_153 {
  flex: none;
  color: var(--muted);
}

._searchInput_3tl39_158 {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
}

._searchInput_3tl39_158::placeholder {
  color: var(--muted);
  font-weight: 400;
}

/* The native search affordance clashes with the pill. */
._searchInput_3tl39_158::-webkit-search-cancel-button {
  appearance: none;
}

._searchClear_3tl39_180 {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--line);
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
}

/* Desktop shows the chip row; phones swap in .statusSelect instead. */
._statusSelect_3tl39_193 {
  display: none;
}

._chips_3tl39_198 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

._chips_3tl39_198::-webkit-scrollbar {
  display: none;
}

._chip_3tl39_198 {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface-alt);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  text-transform: capitalize;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.28s var(--ease-out), color 0.28s var(--ease-out);
}

._chip_3tl39_198:hover {
  color: var(--ink);
}

._chipOn_3tl39_231 {
  background: var(--ink);
  color: var(--surface);
}

._chipOn_3tl39_231:hover {
  color: var(--surface);
}

._selects_3tl39_240 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

._clear_3tl39_247 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  transition: color 0.28s var(--ease-out);
}

._clear_3tl39_247:hover {
  color: var(--ink);
}

/* ---------- List / Map switch ---------- */

._viewToggle_3tl39_266 {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-alt);
  /* Tapping a label must switch the view, not start a text selection. */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

._viewBtn_3tl39_279 {
  position: relative;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted);
  transition: color 0.28s var(--ease-out);
}

._viewBtn_3tl39_279:hover {
  color: var(--ink);
}

._viewBtnOn_3tl39_295,
._viewBtnOn_3tl39_295:hover {
  color: var(--surface);
}

/* Slides between the two options via a shared layoutId. */
._viewPill_3tl39_301 {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  background: var(--ink);
}

._viewLabel_3tl39_309 {
  position: relative;
  z-index: 1;
}

/* ---------- Results / map layout ---------- */

/* flex-basis stays auto (not the 0% that "flex: 1" implies) so .splitMap's
   explicit height below is actually honored as the item's main size — with a
   0% basis, flex sizing wins and a height set on the same element is
   silently ignored, which is what let this box hug its content before. */
._split_3tl39_316 {
  display: grid;
  flex: 0 1 auto;
  border-top: 1px solid var(--line);
}

/* Map view is a self-contained tool one viewport tall, with the results
   scrolling inside it — a distinct mode rather than a layout variant. A sticky
   map was tried and does not work here: sticky travel is only
   (list height − map height), so with a short list the map rides up under the
   nav after a few hundred pixels. */
._splitMap_3tl39_316 {
  grid-template-columns: 55fr 45fr;
  /* Sized by the results rather than clamped to the viewport, so the whole
     set is on screen at once instead of four of six showing and the rest
     scrolling inside the pane. The map column stretches to match. The
     min-height keeps the tool substantial when a filter cuts the set down. */
  min-height: calc(100vh - var(--nav-h) - var(--filter-h));
  min-height: calc(100svh - var(--nav-h) - var(--filter-h));
}

/* List view: one full-width column, page scrolls normally. */
._splitList_3tl39_342 {
  grid-template-columns: 1fr;
}

/* ---------- Results ---------- */

._listPane_3tl39_348 {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

._splitMap_3tl39_316 ._listPane_3tl39_348 {
  border-right: 1px solid var(--line);
}

._listHead_3tl39_358 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 20px var(--shell-gutter) 16px;
}

._counts_3tl39_367 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

._count_3tl39_367 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}

._countHint_3tl39_382 {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

._sortCell_3tl39_389 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

._cards_3tl39_400 {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 0 var(--shell-gutter) 40px;
}

/* Scrolls internally while there's more to show; once the list bottoms out,
   scroll chains through to the page so the next section keeps scrolling. */
._splitMap_3tl39_316 ._cards_3tl39_400 {
  grid-template-columns: repeat(2, 1fr);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

._splitList_3tl39_342 ._cards_3tl39_400 {
  grid-template-columns: repeat(3, 1fr);
}

._card_3tl39_400 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
  border-radius: 20px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.3s var(--ease-out);
}

/* Hover is a flat grey fill — no lift, no shadow. */
._card_3tl39_400:hover,
._cardOn_3tl39_433 {
  background: var(--surface-alt);
}

._media_3tl39_437 {
  position: relative;
  /* Taller than the original 16/11 — the photo carries these cards. */
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
}

._mediaImage_3tl39_445 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

._card_3tl39_400:hover ._mediaImage_3tl39_445,
._cardOn_3tl39_433 ._mediaImage_3tl39_445 {
  transform: scale(1.05);
}

._status_3tl39_193 {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink);
}

._statusMuted_3tl39_472 {
  background: rgba(17, 17, 17, 0.75);
  color: #fff;
}

._body_3tl39_477 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px 8px;
}

/* Price leads the card the way it leads a listing search. */
._price_3tl39_485 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

._address_3tl39_494 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}

._meta_3tl39_502 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  text-transform: capitalize;
}

._empty_3tl39_510 {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 40px 8px;
  max-width: 420px;
}

._empty_3tl39_510 p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

._emptyBtn_3tl39_527 {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--surface);
}

/* ---------- Map ---------- */

/* z-index establishes a stacking context so Leaflet's own layers cannot paint
   over the floating filter pill. */
._mapPane_3tl39_541 {
  position: relative;
  z-index: 0;
  min-height: 0;
  background: var(--surface-alt);
}

._mapControls_3tl39_548 {
  position: absolute;
  z-index: 500;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

._moveToggle_3tl39_561,
._resetView_3tl39_562 {
  pointer-events: auto;
}

._moveToggle_3tl39_561 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.16);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

._moveToggle_3tl39_561 input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

._toggleTrack_3tl39_588 {
  position: relative;
  width: 30px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.28s var(--ease-out);
}

._toggleKnob_3tl39_598 {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.3);
  transition: transform 0.28s var(--ease-out);
}

._moveToggle_3tl39_561 input:checked + ._toggleTrack_3tl39_588 {
  background: var(--green);
}

._moveToggle_3tl39_561 input:checked + ._toggleTrack_3tl39_588 ._toggleKnob_3tl39_598 {
  transform: translateX(12px);
}

._moveToggle_3tl39_561 input:focus-visible + ._toggleTrack_3tl39_588 {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

._resetView_3tl39_562 {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.16);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink);
  transition: background 0.28s var(--ease-out);
}

._resetView_3tl39_562:hover {
  background: var(--surface-alt);
}

/* ---------- Investment insights ---------- */

._insights_3tl39_641 {
  padding: var(--section-pad) var(--gutter);
  background: var(--surface-alt);
  text-align: center;
}

._insightsTitle_3tl39_647 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--ink);
}

._insightsSub_3tl39_654 {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  margin: 10px 0 40px;
}

._insightsGrid_3tl39_661 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--content);
  margin-inline: auto;
  text-align: left;
}

._insightCard_3tl39_670 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 195px;
  padding: 15px;
  border-radius: 24px;
  background: var(--surface);
}

._insightValue_3tl39_680 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36.375px;
  line-height: 46.8px;
}

._insightLabel_3tl39_687 {
  font-family: var(--font-sans);
  font-size: 14.1px;
  color: var(--ink);
}

/* ---------- Responsive ---------- */

@media (max-width: 1320px) {
  ._splitList_3tl39_342 ._cards_3tl39_400 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1180px) {
  /* The bar wraps to two rows here, so the sticky map has to drop by the
     same amount to stay flush beneath it. */
  ._shell_3tl39_77 {
    --filter-h: 118px;
  }

  ._filterBar_3tl39_98 {
    flex-wrap: wrap;
  }

  ._splitMap_3tl39_316 ._cards_3tl39_400 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1000px) {
  ._insightsGrid_3tl39_661 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  /* The side-by-side split does not survive a phone — the map becomes a
     stationary band above the results, and the results run on down the page.
     No inner scroller here: a 55vh pane inside a scrolling page meant the
     whole set was reachable only through a nested swipe. */
  ._splitMap_3tl39_316 {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  ._mapPane_3tl39_541 {
    order: -1;
    height: 380px;
  }

  ._splitMap_3tl39_316 ._cards_3tl39_400 {
    grid-template-columns: repeat(2, 1fr);
    flex: none;
    height: auto;
    overflow-y: visible;
  }

  ._hero_3tl39_12 {
    padding: 130px 20px 24px;
  }

  ._splitMap_3tl39_316 ._listPane_3tl39_348 {
    border-right: 0;
  }

  /* Stacked, the bar is 246px — 30% of a phone screen. Docking that under
     the nav would leave a sliver of results, so on phones it stays in flow
     and scrolls away with the page. */
  ._filterBar_3tl39_98 {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0 20px;
    padding: 14px;
  }

  ._filterBarDocked_3tl39_118 {
    margin: 0 20px;
    padding: 14px;
    border-radius: 16px;
    border-bottom: 0;
    box-shadow: none;
  }

  /* An explicit width, not just min-width:0 — flex stretch alone still let the
     rows resolve to their min-content width and burst out of the card, since
     the chips and the three selects are together wider than a phone. */
  ._filterBar_3tl39_98 > *,
  ._barLeft_3tl39_126 > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  ._barLeft_3tl39_126 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  ._search_3tl39_135 {
    width: 100%;
  }

  /* Four status pills cannot share a phone row, so the chips give way to the
     dropdown — the same control as the other three filters. */
  ._chips_3tl39_198 {
    display: none;
  }

  ._statusSelect_3tl39_193 {
    display: block;
  }

  /* Fields across rather than stacked full-width rows, which would push the
     results off the first screen. minmax(0,1fr) lets the tracks shrink below
     the triggers' natural width. */
  ._selects_3tl39_240 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  ._selects_3tl39_240 > div {
    width: 100%;
  }

  ._clear_3tl39_247 {
    grid-column: 1 / -1;
    justify-self: start;
    padding-left: 0;
  }

  ._viewToggle_3tl39_266 {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  ._viewBtn_3tl39_279 {
    flex: 1;
  }

  ._listHead_3tl39_358,
  ._cards_3tl39_400 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 620px) {
  ._splitList_3tl39_342 ._cards_3tl39_400,
  ._splitMap_3tl39_316 ._cards_3tl39_400 {
    grid-template-columns: 1fr;
  }

  ._insights_3tl39_641 {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Three selects across a phone truncates every label to "Any …" — two fit
     their text, and the toggle keeps its own full-width row below. */
  ._selects_3tl39_240 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._mapControls_3tl39_548 {
    top: 12px;
    left: 12px;
    right: 12px;
  }

  ._moveToggle_3tl39_561 {
    font-size: 11.5px;
  }
}