/* ==========================================================================
   14ELMS — fluid type system.
   The whole layout is driven by body{font-size:1vw}: every layout value is
   expressed in em, so the page scales proportionally with viewport width.
   rem (16px) is used only where a value must stay fixed.
   ========================================================================== */

/* Fraunces, under the SIL Open Font Licence, self-hosted as one variable
   file covering every weight. Bodoni Moda and Petrona both stay in fonts/,
   so going back to either is two lines. A softer cut of this same face sits
   beside it as fraunces_soft.woff2, carrying the SOFT and WONK axes. */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #fff;
  --black: #292929;
  --primary: #e8ceff;
  --primary-hover: #d5beeb;
  --ink: #121214;
}

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

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--white);
  color: var(--black);
  font-family: 'Fraunces', Georgia, serif;
  /* Fraunces reads lighter than the face it replaced, so the whole page sits
     one notch up: everything that does not set its own weight inherits this */
  font-weight: 480;
  font-size: 1vw;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* pictures inside content sit on the text baseline the way the reference does */
.image { display: inline-block; vertical-align: middle; }

.main {
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
}
button, input { font: inherit; color: inherit; }

/* Scrollbar: thin vertical rail, horizontal bar suppressed. */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar:horizontal { height: 0; }
::-webkit-scrollbar:horizontal:corner-present { display: none; }
::-webkit-scrollbar-button { width: 6px; height: 0; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #292929; border-radius: 8px; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 99;
  width: 100vw;
}

.wrapper_header {
  display: flex;
  width: 100%;
  padding: 0.85em 2rem;
}

.grid_header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-template-rows: auto;
  gap: 0;
  place-items: stretch start;
  width: 100%;
}

.logo_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  font-size: 1.3em;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.3s ease;
}

/* centre pill ------------------------------------------------------------ */

.menu {
  justify-self: center;
  width: 23em;
  height: auto;
  padding: 0.2em 0.2em 0.2em 1em;
  border-radius: 0.4em;
  background-color: var(--black);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.flex_menu {
  display: flex;
  justify-content: space-between;
  height: 100%;
  column-gap: 72px;
  row-gap: 32px;
  font-size: 0.85em;
}

.menu_link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 0.8em;
  font-size: 0.82em;
  cursor: pointer;
  user-select: none;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 0.1875em;
  width: 2.3em;
  height: 1.5em;
}

.hamburger .line_one,
.hamburger .line_two {
  height: 1.3px;
  width: 2em;
  background-color: var(--white);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.menu_txt {
  color: var(--white);
  font-weight: 660;
  font-size: 1.25em;
  line-height: 1;
}

.close_txt { display: none; }

.header_button {
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding held in px so a larger label does not inflate the pill */
  padding: 10.54px 20.07px;
  border-radius: 0.3em;
  background-color: var(--primary);
  color: var(--black);
  font-weight: 660;
  font-size: 1.03em;
  transition: all 0.4s;
}

.header_button:hover { background-color: var(--primary-hover); }

/* right-hand apply button ------------------------------------------------- */

.apply_button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  margin-left: auto;
}

.button {
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.25em;
  /* the control keeps its size while the type inside stays fluid */
  height: 2.5rem;
  min-height: 2.5rem;
  font-size: 0.8em;
  color: var(--black);
}

.button.header_cta {
  height: 2.5rem;
  min-height: 2.5rem;
}

.icon_box {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border-radius: 0.375em;
  background-color: var(--primary);
  overflow: hidden;
}

.icon_box.black { background-color: var(--black); }

/* the arrow swaps sides on hover: the right one spins away, the left one
   arrives and the label slides back over to meet it */
.icon_box.is-left,
.icon_box.is-right,
.text_box {
  transition: transform 0.65s cubic-bezier(0.83, 0, 0.17, 1);
}

.icon_box.is-left {
  transform-origin: 0 50%;
  transform: rotate(45deg) scale(0);
}

/* the right arrow sits at the far edge and is out of the flow, so the label
   keeps the button's width to itself */
.icon_box.is-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  transform-origin: 50% 50%;
}

@media (min-width: 992px) {
  .button:hover .icon_box.is-left { transform: rotate(0deg) scale(1); }
  .button:hover .icon_box.is-right { transform: rotate(-45deg) scale(0); }
  .button:hover .text_box { transform: translateX(0); }
}

.arrow_icon {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.5em;
  overflow: hidden;
}

.arrow_icon svg { display: block; width: 100%; height: 100%; }

.text_box {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 0.4em;
  background-color: var(--primary);
  font-weight: 660;
  font-size: 1.03em;
  white-space: nowrap;
  overflow: hidden;
  transform: translateX(-4.485em);
}

.text_box.header_btn { font-size: 1em; }

/* expanding menu panel under the pill ------------------------------------- */

.menu_fs {
  grid-column: 2;
  display: none;
  flex-flow: column;
  width: 23em;
  margin: 8.64px auto 0;
  padding: 14.4px;
  border-radius: 6.4px;
  background-color: var(--primary);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.7s cubic-bezier(0.62, 0.008, 0.351, 0.996),
              transform 0.7s cubic-bezier(0.684, 0.002, 0.363, 0.996);
}

/* laid out one frame before it starts moving, so the fade has a start state */
body.menu-ready .menu_fs { display: flex; }

/* the panel hangs below the bar instead of stretching it */
@media (min-width: 992px) {
  .menu_fs {
    position: absolute;
    top: 60px;
    left: 50%;
    margin: 0 0 0 -11.5em;
  }
}

body.menu-open .menu_fs {
  opacity: 1;
  transform: translateY(0);
}

.grid_menu_mobile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8.64px;
}

.mobile_link {
  padding: 3.2px 0;
  font-size: 0.85em;
  line-height: 1;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.mobile_link:hover {
  opacity: 0.65;
  transform: translate(5%);
}

.contact_button:hover {
  background-color: var(--black);
  color: var(--primary);
}

.contact_button {
  transition: background-color 0.3s ease, color 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 14.4px;
  padding: 11.52px 0;
  border-radius: 4.8px;
  background-color: var(--white);
  font-size: 0.927em;
  font-weight: 660;
  line-height: 1;
}

body.menu-open .open_txt { display: none; }
body.menu-open .close_txt { display: block; }

.hamburger .line_one,
.hamburger .line_two {
  transition: transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.menu-open .line_one { transform: translateY(2px) rotate(45deg); }
body.menu-open .line_two { transform: translateY(-2px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* brightness slider, shown only while the first hero photo is on screen */
.hero-brightness-panel {
  position: absolute;
  right: 1.1em;
  top: 50%;
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625em;
  color: var(--white);
  user-select: none;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s;
}

.hero-brightness-icon {
  display: block;
  width: 1.3em;
  height: 1.3em;
  line-height: 0;
}

.hero-brightness-icon svg { display: block; width: 100%; height: 100%; }

.hero-brightness-range {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 1.125em;
  height: 7.35em;
  background: transparent;
  accent-color: var(--white);
  cursor: pointer;
}

.hero-brightness-range::-webkit-slider-runnable-track {
  width: 0.125em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.hero-brightness-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.875em;
  height: 0.875em;
  margin-left: -0.375em;
  border: 0;
  border-radius: 50%;
  background: var(--white);
}

.wrapper_hero {
  position: relative;
  z-index: 12;
  display: flex;
  grid-template-columns: 1fr 1fr;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 2em 2rem;
}

.heading_box {
  display: flex;
  flex-flow: column;
  row-gap: 1em;
}

.h1 {
  margin: 0;
  color: var(--white);
  font-size: 5em;
  font-weight: 480;
  line-height: 0.9;
}

/* hand-drawn underline sitting under one word of a heading */
.scribble-wrap {
  position: relative;
  display: inline-block;
  padding-bottom: 0.25em;
}

/* the plans heading uses a much tighter underline gap */
.heading_apartments .scribble-wrap { padding-bottom: 0.06em; }

.scribble-wrap::after {
  content: '';
  position: absolute;
  left: -0.03em;
  right: -0.03em;
  bottom: 0.01em;
  height: 0.36em;

  /* The stroke is a mask rather than a picture, so its colour comes from the
     heading it belongs to. As a coloured background image it was drawn in
     lilac and vanished completely against the lilac sections. */
  background-color: currentColor;
  /* the drawing itself comes from --scribble, set per mark further down: a
     custom property reaches ::after from its own element, so each variant is
     written once instead of twice for the prefixed property */
  -webkit-mask-image: var(--scribble);
  mask-image: var(--scribble);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0% 100%;
  mask-position: 0% 100%;

  pointer-events: none;
  clip-path: inset(0 100% 0 0);
}

/* the hero mark paints over its letters, so where it crosses a descender the
   stroke stays unbroken. It also stops just short of the word's last letter
   rather than running past it, which is why the right inset is positive here
   while every other mark overshoots by a hair. */
.scribble-wrap[data-scribble="hero"]::after { right: 0.06em; }

/* where the heading is white the underline keeps the lilac accent instead:
   as plain white it disappeared into the light half of a photograph */
.hero .scribble-wrap::after,
.h2.white .scribble-wrap::after,
.h1.white .scribble-wrap::after,
[data-section="dark"] .scribble-wrap::after { background-color: var(--primary, #e8ceff); }

/* the stroke draws on from the left once the heading comes into view: quick
   off the mark, easing out as a hand does at the end of a stroke */
.scribble-wrap.scribble-visible::after {
  animation: scribble-reveal 2.7s cubic-bezier(0.22, 0.75, 0.3, 1) 0.15s 1 forwards;
}

@keyframes scribble-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0% 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .scribble-wrap::after { clip-path: inset(0 0 0 0); }
  .scribble-wrap.scribble-visible::after { animation: none; }
}

.p_box { width: 35ch; }

.p_gen {
  color: var(--white);
  font-size: 0.85em;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.thumbnails_images {
  display: flex;
  column-gap: 0.5em;
  margin-left: auto;
}

.image_thumbnail {
  position: relative;
  width: 9.5em;
  height: 5.6em;
  border-radius: 3px;
  cursor: pointer;
  transform-origin: 50%;
  perspective-origin: 50%;
  transition: all 0.4s;
}

.image_thumbnail:hover { opacity: 0.85; }

/* only the active thumbnail insets its picture to show the white frame */
.image_thumbnail.is-active {
  padding: 0.2em;
  background-color: var(--white);
}

.thumb_media {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.thumbnail_image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: cover;
}

/* background + overlays --------------------------------------------------- */

.background {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-next { clip-path: circle(0% at 100% 50%); }

.overlay_hero {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#0000001a, #00000038 50%, #0000005e);
  pointer-events: none;
}

/* ==========================================================================
   SCATTERED GALLERY
   A tall scroll area: the heading sticks, the stage pins, photos rise into
   place and then part sideways to reveal the middle one.
   ========================================================================== */

.dynamic_section {
  position: relative;
  isolation: isolate;
  width: 100vw;
  max-width: 100vw;
  height: auto;
  margin-top: 0;
  overflow: hidden;
  overflow-x: clip;
}

.h2 {
  font-size: 6.5em;
  font-weight: 480;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.h2.second_h { font-size: 4.6em; }

.middle {
  position: sticky;
  width: 100%;
  margin-top: 172px;
  overflow: hidden;
  text-align: center;
}

.interaction_gallery {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.wrapper_dynamic {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2rem 0 0;
  overflow: hidden;
}

.interaction__stage {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  overflow: hidden;
}

.interaction__stage > div {
  border-radius: 0.25em;
  overflow: hidden;
  will-change: transform, opacity;
}

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

.photo--lt     { position: absolute; width: 10em;   height: 10em;   margin-right: 65%; margin-bottom: 38%; }
.photo--lm     { position: absolute; width: 13.5em; height: 10em;   margin-right: 72%; }
.photo--lb     { position: absolute; width: 9em;    height: 9em;    margin-right: 50%; margin-top: 40%; }
.photo--rt     { position: absolute; width: 10em;   height: 12.5em; margin-left: 65%;  margin-bottom: 38%; }
.photo--rm     { position: absolute; width: 10em;   height: 9.5em;  margin-left: 75%; }
.photo--rb     {                     width: 15em;   height: 9.5em;  margin-left: 50%;  margin-top: 40%; }
.photo--center { position: absolute; width: 20em;   height: 13em; }

/* ==========================================================================
   ALTERNATING SIDES
   Two full-height rows. The tall photo drifts a little as it passes; the
   small card sticks while its row scrolls by.
   ========================================================================== */

.wrapper_sides { padding: 3rem 2rem; }

.sides_f,
.sides_s { height: 72em; }

.sides_s { margin-top: 42px; }

.sides_wrap {
  display: flex;
  height: 100%;
}

.left_side,
.right_side {
  width: 50%;
  height: 72em;
}

.left_side { display: flex; flex-flow: column; }

.right_side {
  border-radius: 4px;
  overflow: hidden;
}

.right_side .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.h2.smaller {
  font-size: 4.6em;
  line-height: 1;
}

.small_box {
  position: sticky;
  top: 100.8px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 22em;
  margin: 16px 0.75em 0 25.0278em;
}

.small_box.right_box {
  align-items: flex-start;
  margin: 0 360.4px 0 10.8px;
}

.image_small {
  width: 22em;
  height: 24em;
  border-radius: 4px;
  overflow: hidden;
}

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

.caption_info {
  position: sticky;
  top: 100.8px;
  align-self: flex-start;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 22em;
  margin: 0.7em 12px 0 0;
}

.purple_dot {
  width: 0.375em;
  height: 0.375em;
  margin-top: 3px;
  border-radius: 100%;
  background-color: var(--primary);
  flex: 0 0 auto;
}

.flex_txt {
  display: flex;
  flex-flow: column;
  row-gap: 4px;
  width: 18.919em;
  margin-left: 14.4px;
}

.title_txt {
  font-size: 1.05em;
  line-height: 1;
}

.caption_txt {
  font-size: 0.9em;
  line-height: 1.2;
  opacity: 0.65;
}

/* ==========================================================================
   PLANS — a row of cards wider than the screen, with the heading behind it
   ========================================================================== */

.apartments {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: var(--white);
}

.wrapper_apartments {
  position: relative;
  z-index: 7;
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 2rem 0;
}

.heading_apartments {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 27.3663em 72px 27.3654em;
}

.apartments_bg_gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-image: linear-gradient(#e8ceff 0%, #e8ceff 50%, rgba(254, 183, 185, 0) 100%);
}

.apart_cards_viewport {
  position: relative;
  z-index: 2;
  /* the track is translated sideways; without clipping it spilled past the
     viewport and gave the whole page a horizontal scrollbar */
  overflow-x: clip;
  /* the row rides high enough to run over the foot of the heading: at 306px,
     and even at 232px, it sat clear of the text with a band of empty lilac
     between the two */
  margin: 150px 0 40px;
}

.apart_cards_track {
  display: flex;
  width: max-content;
  gap: 2.75em;
}

.apart_card {
  flex: 0 0 auto;
  width: 24.5em;
  /* the card was 29.76em with an 18em photo, so the picture carried only 60%
     of it and the row left a band of empty lilac under the heading */
  height: 36em;
  padding: 10.8px 10.8px 17.28px;
  border-radius: 8px;
  background-color: var(--white);
  overflow: hidden;
}

.apart_image {
  position: relative;
  width: 23em;
  /* the photo now carries about seven tenths of the card instead of six */
  height: 25em;
  border-radius: 6px;
  overflow: hidden;
}

.apart_image .image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay_tags {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0.7em;
}

.tag_available {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 1em;
  padding: 0.5em 0.4em 0.5em 0.5em;
  border-radius: 3px;
  background-color: rgb(218, 235, 200);
  font-size: 0.7em;
}

.dot_available {
  width: 0.3em;
  height: 0.3em;
  border-radius: 100%;
  background-color: rgb(54, 79, 27);
}

.tags_info {
  display: flex;
  column-gap: 4px;
  margin-top: auto;
}

.tag_info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 0.375em;
  padding: 0.35em 0.45em;
  border-radius: 3px;
  background-color: var(--white);
  font-size: 0.75em;
}

.icon_tag {
  display: block;
  flex: 0 0 auto;
  width: 1.244em;
  height: 1.244em;
  line-height: 1;
}

.icon_tag svg { width: 100%; height: 100%; display: block; }

.tag_info sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
}

.content_apart {
  display: flex;
  flex-flow: column;
  width: 23em;
}

.apart_title_line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.7em;
}

.apart_title { font-size: 1.45em; }

.price_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 6px;
}

.icon_price {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  padding: 0.375em;
  border-radius: 100%;
  background-color: var(--primary);
}

.icon_price svg { width: 100%; height: 100%; display: block; }

.price_txt { font-size: 1.3em; }

.desc_home { margin-top: 0.7em; }

.p_gen.black {
  color: var(--black);
  font-size: 0.9em;
  line-height: 1.3;
}

.p_gen.black.specific { font-size: 0.74em; }

.p_gen.black.caption_cta { font-size: 1.1em; }

.explore_button {
  display: flex;
  margin-top: 1.25em;
}

/* ==========================================================================
   NEIGHBOURHOOD PANEL — photo, drifting clouds, a dropped pin
   ========================================================================== */

.fs {
  width: 100vw;
  height: 68em;
  padding: 2rem;
}

.fs_box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.txt_wrap {
  position: absolute;
  inset: 0;
  z-index: 9;
  padding: 3em 0 0 2.5em;
}

.h2.white {
  color: var(--white);
  font-size: 4.5em;
  line-height: 0.78;
}

.svg_items {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-flow: column;
  padding: 2em 4em 17em;
}

.clouds_top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 5.7em;
  height: 7.5em;
}

.cloud_f,
.cloud_s,
.cloud_t {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 78'%3E%3Cg fill='%23ffffff' fill-opacity='.92'%3E%3Cellipse cx='42' cy='48' rx='30' ry='22'/%3E%3Cellipse cx='72' cy='42' rx='26' ry='24'/%3E%3Cellipse cx='92' cy='54' rx='22' ry='16'/%3E%3Crect x='16' y='50' width='90' height='20' rx='10'/%3E%3C/g%3E%3C/svg%3E");
}

.cloud_f {
  width: 4.2em;
  height: 4.2em;
  margin: -9.6px 0 3em;
}

.cloud_s {
  width: 6em;
  height: 5.5em;
  margin: 2em 0 0;
}

.cloud_t {
  width: 5.299em;
  height: 5.299em;
  margin: 0 0 1em;
}

.pin_ill {
  position: relative;
  left: 7.2px;
  align-self: flex-end;
  width: 2em;
  height: 2.899em;
  margin: auto 42.7778em 0 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 42'%3E%3Cpath d='M14.5 1.5c7.2 0 13 5.8 13 13 0 9.4-13 26-13 26s-13-16.6-13-26c0-7.2 5.8-13 13-13Z' fill='%23e8ceff' stroke='%23292929' stroke-width='2'/%3E%3Ccircle cx='14.5' cy='14.5' r='4.6' fill='%23292929'/%3E%3C/svg%3E");
}

.overlay_fs {
  position: absolute;
  inset: 0;
  z-index: 6;
  background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0));
}

.fs_box_m {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
}

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

/* ==========================================================================
   WALKING TIMES — three bars that fill as the section arrives
   ========================================================================== */

.wrapper_general { padding: 16px 32px 96px; }

.h2.everything_you_need {
  font-size: 6.5em;
  line-height: 1.1;
}

.txt_sides {
  display: flex;
  margin-top: 5em;
}

.left_lines { width: 33.444em; }

.lines_caption { margin-bottom: 32px; }

.lines_list {
  display: flex;
  flex-flow: column;
  row-gap: 1.4em;
}

.lines_dynamic {
  display: flex;
  flex-flow: column;
  row-gap: 16px;
}

.flex_dyn {
  display: flex;
  justify-content: space-between;
}

.title_line {
  font-size: 1.2em;
  line-height: 1;
}

.timing_txt {
  font-size: 1em;
  line-height: 1;
  opacity: 0.45;
}

.bar_dynamic {
  position: relative;
  width: 100%;
  height: 0.139em;
  overflow: hidden;
}

.active_bar {
  position: relative;
  z-index: 4;
  width: 0;
  height: 100%;
  background-color: var(--black);
}

.back_bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black);
  opacity: 0.1;
}

.p_right {
  width: 38.222em;
  margin-left: 23.8889em;
  padding-right: 3.2em;
}

.md_p {
  width: 21.89em;
  font-size: 1.6em;
  line-height: 1.14;
}

/* ==========================================================================
   AMENITIES SLIDER
   ========================================================================== */

.amenities_section { width: 100vw; overflow: hidden; }

.sides { width: 100vw; }

.wrapper_general.basic { padding: 160px 32px; }

.amenities_heading {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  row-gap: 1.75em;
  text-align: center;
}

.h2.middle_spec {
  font-size: 5em;
  line-height: 0.7;
}

.container.only_amenities { padding: 4em 0; }

/* the amenities strip is dragged, not clicked: the reference hides both */
.container.only_amenities .splide__arrows,
.container.only_amenities .splide__pagination { display: none; }

.container.only_amenities .splide__track { overflow: visible; }

.second_splide { position: relative; }

.splide__track { width: 100%; overflow: hidden; }

.splide__list {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  column-gap: 0.5em;
}

.amenities_splide {
  position: relative;
  flex: 0 0 auto;
  width: 31.852em;
  aspect-ratio: 1440 / 1546;
  border-radius: 4px;
  overflow: hidden;
}

.image_amenities {
  width: 100%;
  height: 100%;
}

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

.overlay_amenities {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 1.4em;
}

.title_amenities {
  color: var(--white);
  font-size: 1.5em;
}

.bottom_amenities { margin-top: auto; }

.desc_amenities { width: auto; }

.overlay_color {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: #00000045;
}

/* ==========================================================================
   HOW IT GOES — sticky column on the left, three step cards on the right
   ========================================================================== */

.flex_how { display: flex; }

/* the second call to action only exists on narrow screens */
.bottom_how.only_mobile { display: none; }

.left_title { width: 40%; }

.sticky_how {
  position: sticky;
  top: 86.4px;
}

.top_how {
  display: flex;
  flex-flow: column;
  row-gap: 16px;
}

.caption_small {
  font-size: 0.85em;
  line-height: 1;
}

.bottom_how {
  display: flex;
  flex-flow: column;
  row-gap: 0.6em;
  margin-top: 18em;
}

.right_cards {
  width: 40%;
  margin-left: 19.1111em;
}

.how_cms {
  display: flex;
  flex-flow: column;
  row-gap: 0.7em;
}

.how_card { border-radius: 8px; overflow: hidden; }

.wrapper_how {
  display: flex;
  flex-flow: column;
  padding: 1.45em;
}

.icon_how {
  width: 2.6em;
  height: 2.6em;
  margin-left: auto;
}

.icon_how svg { width: 100%; height: 100%; display: block; }

.content_how {
  display: flex;
  flex-flow: column;
  row-gap: 0.6em;
  width: 30.378em;
  margin-top: 5.25em;
}

.title_how {
  font-size: 1.5em;
  line-height: 1;
}

/* ==========================================================================
   TENANT QUOTES — pick a face on the left, read them on the right
   ========================================================================== */

.h2.bigger {
  font-size: 6em;
  line-height: 0.7;
}

.cms_testimonials {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 37.5em;
  margin-top: 128px;
}

.authors { width: 14.333em; }

.author_coll {
  display: flex;
  flex-flow: column;
  justify-content: center;
  row-gap: 0.375em;
  min-height: 10.349em;
}

.author_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 88%;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.author_item.is-active { opacity: 1; }

.author_circle {
  position: relative;
  width: 2.816em;
  height: 2.816em;
  padding: 0.1em;
  border-radius: 999px;
}

.author_item.is-active .author_circle { background-color: var(--primary); }

.author_photo {
  width: 3em;
  height: 3em;
  border-radius: 100%;
  overflow: hidden;
}

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

.author_name {
  width: 0;
  margin-left: 0.8em;
  opacity: 0;
  overflow: hidden;
  transition: width 0.4s ease, opacity 0.4s ease;
}

.author_item.is-active .author_name {
  width: auto;
  opacity: 1;
}

.author_name_txt {
  font-size: 0.88em;
  line-height: 1;
  white-space: nowrap;
}

.quotes {
  position: relative;
  width: 76.444em;
  height: 100%;
}

.testimonial_coll {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.testimonial_list {
  position: absolute;
  inset: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.testimonial_item {
  position: absolute;
  inset: 0;
  display: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  /* the reference keeps these inert: the item itself is a block */
  padding: 0 7.64409em 0 9.9375em;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.testimonial_item.is-active {
  display: block;
  opacity: 1;
}

.testimonial_txt {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 2.1em;
  line-height: 1.2;
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.faq_heading {
  display: flex;
  flex-flow: column;
  text-align: center;
  margin: 0 27.0043em 0 27.0035em;
}

.sides_faq {
  display: flex;
  margin-top: 7.5em;
}

.short_left { width: 17.983em; }

.caption_faq {
  line-height: 1.4;
  opacity: 0.65;
}

.bottom_faq {
  display: flex;
  flex-flow: column;
  row-gap: 0.6em;
  margin-top: 12em;
}

.faq_general {
  width: 47.778em;
  margin-left: 29.7951em;
}

.collection_faq { padding-top: 0.8px; }

.accordion-item {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  padding: 0.8em 0;
  border-bottom: 0.8px solid rgba(41, 41, 41, 0.2);
  cursor: pointer;
}

.accordion_head-wrapper,
.item_head,
.title_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.item_head { flex-flow: column; align-items: flex-start; }

.item_title {
  font-size: 1.2em;
  line-height: 1;
}

.icon_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
  padding: 0.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.4V12.6M3.4 8H12.6' stroke='%23292929' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.accordion-item.is-open .icon_wrapper { transform: rotate(45deg); }

.item_content-wrapper {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}

.accordion-item.is-open .item_content-wrapper {
  transition: height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.accordion_paragraph {
  display: flex;
  flex-flow: column;
  width: 100%;
  margin: 0.8em 0 0.2em;
}

.item_paragraph {
  max-width: 91%;
  font-size: 0.9em;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(0.56em);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.accordion-item.is-open .item_paragraph {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.item_paragraph p { margin: 0; }

/* ==========================================================================
   CLOSING CALL TO ACTION
   ========================================================================== */

.fs_cta {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.abs_box {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 32px;
}

.pink_cta {
  width: 41.089em;
  border-radius: 0.375em;
  background-color: var(--primary);
}

.wrapper_box_cta { padding: 20px 19.2px 20px 21.6px; }

.heading_cta { margin-bottom: 5.5em; }

.txt_cta {
  font-size: 3.1em;
  line-height: 1;
}

.flex_cta {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  height: 3em;
}

.black_button .button { position: relative; }

.text_box.black {
  background-color: var(--black);
  color: var(--white);
}

.icon_box.is-right.black { z-index: 3; }

.icon_box.black .arrow_icon { color: var(--white); }

.icon_right {
  width: 3em;
  height: 3em;
  margin-left: auto;
}

.icon_right svg { width: 100%; height: 100%; display: block; }

.fs_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background-color: var(--ink);
  color: var(--white);
}

.wrapper_footer { padding: 3.8em 32px 8em; }

.flex_f_top { display: flex; }

.caption_left { width: 38.222em; }

.cap_footer {
  font-size: 2.9em;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--primary);
}

.menu_footer {
  display: grid;
  /* the container is sized in em, so the columns have to be too: as fixed px
     they stopped fitting below ~1420 and pushed the page sideways */
  grid-template-columns: 21.889em 21.889em;
  gap: 100.8px 4em;
  width: 47.778em;
  margin-left: 9.55556em;
}

.title_footer {
  margin-bottom: 20px;
  font-size: 0.85em;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--white);
  opacity: 0.45;
}

.links_list {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 4px;
}

.link_f {
  font-size: 1.25em;
  line-height: 1.2;
  color: var(--white);
  transition: color 0.3s ease;
}

.link_f:hover { color: var(--primary); }

.back_socials {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  height: 2.5em;
  margin-top: 13em;
}

.back_top {
  display: inline-block;
  font-size: 0.85em;
  line-height: 1;
  color: var(--white);
  transition: opacity 0.3s ease;
}

.back_top:hover { opacity: 0.6; }

.socials_box {
  display: flex;
  column-gap: 9.6px;
  width: 47.778em;
  margin-left: auto;
}

.social_link,
.social_icon {
  width: 2.5em;
  height: 2.5em;
}

.social_icon svg {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.75;
}

.social_link {
  transition: opacity 0.3s ease;
}

.social_link:hover { opacity: 0.8; }

/* the lamp warms up once the footer comes into view */
.ill_interactive,
.ill_svg_footer,
.footer-lamp-wrap { width: 100%; height: 24.59em; }

.footer-lamp { width: 100%; height: 100%; display: block; }

#lamp-glow {
  opacity: 0;
  transition: opacity 0.9s ease;
}

#lamp-glow.in-view { opacity: 1; }

.last_line {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
  padding: 0 32px 2em;
  font-size: 0.82em;
  line-height: 1;
  color: var(--white);
}

.last_txt { opacity: 0.45; }

.web_dev_by { margin-right: 11.808px; margin-left: auto; }

.op_spec { opacity: 0.45; }

.spec_link {
  text-decoration: underline;
  transition: opacity 0.3s ease;
}

.spec_link:hover { opacity: 0.6; }

/* ==========================================================================
   INNER PAGE TOP — heading block that clears the fixed header
   ========================================================================== */

.page_top .wrapper_general {
  padding-top: 160px;
  padding-bottom: 48px;
}

.page_top .cap_box { margin-bottom: 16px; }

.page_top h1 {
  margin: 0;
  font-weight: 480;
}

.page_top .p_box {
  width: 35ch;
  margin-top: 24px;
}

.page_top .p_gen.black { opacity: 0.65; }

.contact_sec .bottom_how { margin-top: 48px; }

.contact_sec .how_card .wrapper_how { padding: 24px 1.45em; }

.contact_sec .content_how { margin-top: 0; }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

/* plans ------------------------------------------------------------------ */
.plans_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 39.6px;
}

.plans_grid .apart_card {
  width: 100%;
  height: auto;
}

.plans_grid .apart_image,
.plans_grid .content_apart { width: 100%; }

.plans_grid .apart_image {
  height: auto;
  aspect-ratio: 331 / 259;
}

/* amenities -------------------------------------------------------------- */
.amenities_fs_page { padding: 0 32px; }

.box_fs_image {
  width: 100%;
  height: 45em;
  border-radius: 8px;
  overflow: hidden;
}

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

.md_amenities {
  display: flex;
  justify-content: flex-end;
  padding: 96px 0 32px;
}

/* ==========================================================================
   HOW TO APPLY — hero, then the deck of step cards on a pinned scroll
   ========================================================================== */

main.hero_how { height: 100vh; }

.wrapper_apply {
  position: relative;
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 11em 2rem 2em;
}

.h1.black {
  margin: 0;
  color: var(--black);
  font-size: 4.5em;
  font-weight: 480;
  line-height: 0.9;
}

.ill_abs {
  position: absolute;
  inset: 0;
  margin: 19.25em 0;
}

.bot_side_hero { margin-top: auto; }

.shift_box {
  width: 55%;
  margin-left: 45%;
}

.apply_box {
  display: flex;
  flex-flow: column;
  row-gap: 10.8px;
  margin-bottom: 1.5em;
}

.title_apply_box { width: 22.326em; }

.title_apply {
  font-size: 2.15em;
  line-height: 1.2;
}

.p_apply_box { width: 24.806em; }

.p_apply_box .p_gen {
  font-size: 0.9em;
  line-height: 1.3;
}

/* the deck ---------------------------------------------------------------- */
.how_to_apply {
  position: relative;
  height: 100vh;
  margin: 160px 0;
  overflow: hidden;
}

.wrapper_how_to {
  position: relative;
  height: 100%;
  padding: 7.5em 2rem 1.5em;
}

.abs_heading {
  position: absolute;
  top: 7.5em;
  left: 2rem;
  width: 31.5em;
}

.h2.smaller.spec_how {
  margin: 0;
  font-size: 4.6em;
  font-weight: 480;
  line-height: 1.1;
}

.chips_bot {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin: 0 33% 1.7em;
  row-gap: 7.2px;
  column-gap: 4.32px;
}

.chip_how {
  padding: 0.7em 0.875em;
  border-radius: 0.15em;
  background-color: var(--black);
  color: var(--white);
  font-size: 0.7em;
  line-height: 1;
  overflow: hidden;
  transition: 0.4s;
}

.card_how_parent { position: relative; }

.cards_how_list {
  position: relative;
  height: 62.5em;
  padding-bottom: 5em;
}

.card_how_item {
  position: absolute;
  top: 31.25em;
  left: 47.778em;
  width: 22.014em;
  height: 29.028em;
  border-radius: 0.5em;
  overflow: hidden;
  will-change: transform;
}

.wrapper_card {
  display: flex;
  flex-flow: column;
  padding: 1.5em;
}

.number_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.153em;
  height: 2.153em;
  border-radius: 4px;
}

.number_text {
  font-size: 0.8em;
  line-height: 1;
}

.title_step_box { margin: 16px 0 20.16px; }

.title_step {
  font-size: 1.3em;
  line-height: 1;
}

.illustration_step {
  width: 15.208em;
  height: 12.986em;
  margin: 16px 0 14.4px;
}

.illustration_step svg {
  display: block;
  width: 100%;
  height: 100%;
}

.description_step { margin-top: 2.475px; }

.desc_step_txt {
  font-size: 0.85em;
  line-height: 1.4;
}

/* ==========================================================================
   GALLERY PAGE — one screen: counter and drawing left, photo right, thumbs below
   ========================================================================== */

main.gallery { height: 100vh; }

.gallery_wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 8em 0 0.889em;
}

.top_side {
  display: flex;
  flex: 1 1 auto;
  margin: 0 2rem;
}

.left_ill {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 57.144%;
}

.number_active {
  font-size: 3em;
  line-height: 1;
  letter-spacing: -0.02em;
}

.number_active .num_roll {
  display: inline-flex;
  gap: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.number_active .digit {
  position: relative;
  width: 0.62em;
  height: 1em;
  overflow: hidden;
}

.number_active .digit_curr,
.number_active .digit_next {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  will-change: transform;
}

.number_active .digit_curr { top: 0; }
.number_active .digit_next { top: 100%; }

.ill_middle {
  position: absolute;
  inset: 0;
  width: 20em;
  height: 20em;
  margin: auto;
}

.ill_middle .gallery_ill {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform-origin: 50% 50%;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bottom_active {
  display: flex;
  margin-top: auto;
}

.numbers_small {
  display: flex;
  width: 30%;
  column-gap: 3px;
}

.active_small,
.all_small,
.gallery_caption {
  font-size: 0.9em;
  line-height: 1;
}

.gallery_caption {
  width: 60%;
  margin-left: 10%;
}

.right_fs {
  position: relative;
  width: 42.856%;
}

.gallery_parent { height: 100%; }

.gallery_list {
  position: absolute;
  inset: 0;
}

.gallery_item {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: 0.25em;
  overflow: hidden;
}

.gallery_item.is-active { display: block; }

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

.bottom_side { margin-top: 1.542em; }

.list_thumbs {
  position: relative;
  display: flex;
  column-gap: 0.4em;
  padding: 0.875em 0.375em 0.375em;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.list_thumbs_inner {
  position: relative;
  display: flex;
  gap: 0.75em;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  touch-action: pan-y;
}

.thumb_item {
  position: relative;
  flex: 0 0 8.25em;
  width: 8.25em;
  height: 5.25em;
  border-radius: 0.125em;
  overflow: hidden;
  cursor: pointer;
}

.thumb_item .image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.thumb_item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0.25em solid transparent;
  border-radius: 0.125em;
  pointer-events: none;
  transition: border-color 0.18s ease;
}

.thumb_item.is-active::after { border-color: var(--black); }

/* ==========================================================================
   LOCATION PAGE — full-screen slider, then the map with its card rail
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

main.locations {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: var(--ink);
}

.wrapper_slider {
  position: relative;
  height: 100%;
}

/* thumbnails sit over the bottom of the photo */
.nav_cms {
  position: absolute;
  inset: auto 0 0;
  z-index: 15;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 2em;
}

.flex_nav {
  display: flex;
  column-gap: 7.92px;
}

.nav_item {
  position: relative;
  width: 7.5em;
  height: 4.5em;
  border: 1.6px solid transparent;
  border-radius: 0.25em;
  overflow: hidden;
  cursor: pointer;
}

.nav_wrap {
  display: block;
  width: 7.278em;
  height: 4.278em;
}

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

/* the dim lifts off the thumbnail that is showing */
.overlay_active {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  transition: margin-top 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav_item.is-active .overlay_active { margin-top: 4.278em; }

.gallery_slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.gallery_slider_list {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.gallery_img_slide {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery_img_slide.is-active { opacity: 1; }

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

.hero_bg_overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1));
}

.gallery_slide_texts_wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-flow: column;
  padding: 10em 2rem 3em;
}

.heading_h_carousel {
  width: 34.727em;
  margin-bottom: 0.7em;
}

.h2.locations_specific {
  margin: 0;
  color: var(--white);
  font-size: 4em;
  font-weight: 480;
  line-height: 1;
}

.loc_description { width: 26.042em; }

.loc_description .p_gen {
  color: var(--white);
  font-size: 0.85em;
  line-height: 1.5;
}

.list_times {
  display: flex;
  row-gap: 0;
  column-gap: 1.8em;
  margin-top: auto;
  margin-bottom: 10em;
}

.flex_location {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 0.6em;
}

.icon_location {
  width: 2em;
  height: 2em;
}

.icon_location svg { width: 100%; height: 100%; display: block; }

.caption_location {
  color: var(--white);
  font-size: 0.8em;
  line-height: 1;
}

/* the map ---------------------------------------------------------------- */
.on_the_map { background-color: var(--ink); }

.location_on_map { padding: 11em 2rem 3.5em; }

.locations_headings {
  width: 37.208em;
  margin: 0 auto;
  text-align: center;
}

.h2.white.specific_map {
  margin: 0;
  color: var(--white);
  font-size: 4.5em;
  font-weight: 480;
  line-height: 1;
}

.map_sec {
  position: relative;
  height: 100vh;
  padding: 1rem;
  background-color: var(--ink);
}

.map_box {
  position: relative;
  height: 100%;
  border-radius: 6px;
  background-color: #222;
  overflow: hidden;
}

.map_drawing {
  display: block;
  width: 100%;
  height: 100%;
}

.map_pin {
  position: absolute;
  width: 2.4em;
  height: 2.4em;
  margin: -2.4em 0 0 -1.2em;
  color: var(--primary);
}

.map_pin svg { width: 100%; height: 100%; display: block; }

.map_cards {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 24em;
  margin: 32px 0 32px 32px;
}

.cards_list {
  display: flex;
  flex-flow: column;
  row-gap: 4.8px;
}

.map_card {
  border-radius: 0.25em;
  background-color: var(--white);
  transition: opacity 0.3s ease;
}

.map_card:hover { opacity: 0.8; }

.wrapper_map_card {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 12.8px;
  padding: 0.4em 0.6em 0.4em 0.4em;
}

.image_map_card {
  flex: 0 0 auto;
  width: 4.6em;
  height: 4.6em;
  border-radius: 3px;
  overflow: hidden;
}

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

.content_info {
  display: flex;
  flex-flow: column;
  row-gap: 8.64px;
}

.sub_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 12.8px;
  opacity: 0.65;
}

.subtitle_text {
  font-size: 0.8em;
  line-height: 1;
}

.title_map_card {
  font-size: 1.05em;
  line-height: 1;
}

/* the dark variant of the FAQ block -------------------------------------- */
.faqs.black { background-color: var(--ink); }

.faq_heading.white_ver {
  display: flex;
  flex-flow: column;
  width: 41.549em;
  margin: 0 auto;
}

.faq_heading.white_ver,
.faq_heading.white_ver .h2 { color: var(--white); }

.caption_faq.white_ver,
.p_gen.black.caption_cta.white_ver,
.accordion-item.white_ver { color: var(--white); }

.accordion-item.white_ver { border-bottom-color: rgba(255, 255, 255, 0.2); }

.collection_faq.white_ver {
  padding-top: 0;
  border-top: 0.8px solid rgba(255, 255, 255, 0.2);
}

.icon_wrapper.white_ver {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.4V12.6M3.4 8H12.6' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   AMENITIES PAGE — heading, full-bleed photo with a drawn route, then the
   day read top to bottom beside a sticky sun clock
   ========================================================================== */

.middle_h1 { display: block; text-align: center; }

.amenities_fs {
  position: relative;
  width: 100vw;
  height: 56.25em;
}

.path_overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.path,
.amenities-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.route-line {
  fill: none;
  stroke: #dcbcf7;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}

.box_fs_image {
  height: 100%;
  border-radius: 0;
  overflow: visible;
}

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

/* the photo fades into the page rather than ending on a line */
.ovelay_fs_sketch {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 81%, rgb(255, 255, 255));
}

.md_amenities {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3.8em 2rem;
}

.md_txt {
  width: 19.216em;
  font-size: 1.7em;
  line-height: 1.2;
  text-align: center;
}

.amenities_flow { background-color: var(--white); }

.amenities_wrapper { padding: 11.111em 2rem; }

.amenities_cms { position: relative; }

/* the sun rides along with the list and the clock counts the day out */
.sun-clock {
  position: sticky;
  top: 9em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 5.76px;
  width: 11em;
  height: 4.5em;
  /* fluid, like the column it sits beside: as a fixed 504px it hung far off
     the right edge of a phone screen */
  margin-left: 35em;
}

.lottie_on_scroll,
.sun_changing,
.sun_changing svg {
  display: block;
  width: 6em;
  height: 4.5em;
}

.sun_disc { transition: fill 0.6s ease, r 0.6s ease; }
.sun_rays { transition: opacity 0.6s ease, transform 0.6s ease; transform-origin: 50% 55%; }
.sun_changing.is-evening .sun_rays { opacity: 0; transform: scale(0.7); }
.sun_changing.is-evening .sun_disc { fill: #dcbcf7; }

.time_clock {
  font-size: 1.4em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.amenities_flex {
  display: flex;
  flex-flow: column;
  row-gap: 52px;
}

.amenities_item { display: flex; height: 57em; }

.amenities_info {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 45%;
}

.tag_amen {
  padding: 0.7em 0.8em;
  border-radius: 0.1875em;
  background-color: var(--primary);
  font-size: 0.8em;
  line-height: 1;
}

.info_amen {
  display: flex;
  flex-flow: column;
  row-gap: 12.8px;
  width: 27.9em;
  margin-top: 3.5em;
}

.title_amen {
  font-size: 3em;
  line-height: 1.1;
}

.desc_amen {
  width: 26.665em;
  line-height: 1.2;
}

.included_box {
  display: flex;
  flex-flow: column;
  row-gap: 8px;
  width: 26.665em;
  margin-top: 15em;
}

.inc_title { opacity: 0.65; }

.inc_desc { line-height: 1.3; }

.amenities_img {
  width: 50%;
  margin-left: 5%;
  border-radius: 0.25em;
  overflow: hidden;
}

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

/* pets ------------------------------------------------------------------- */
.pets { background-color: var(--primary); }

.wrapper_pets {
  position: relative;
  padding: 5.667em 2rem 3.5em;
}

.h2.pets_h {
  margin: 0;
  font-size: 6.2em;
  font-weight: 480;
  line-height: 1.15;
}

.pets_ill {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35em;
  margin-top: 128px;
}

.box_pets {
  width: 35em;
  height: 35em;
  margin: 0 6.5em 0 29.872em;
  background-image: url('../img/pets.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.p_pets { width: 24.188em; }

.p_pets .p_gen {
  font-size: 0.9em;
  line-height: 1.3;
}

.pet_boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 0;
  column-gap: 64px;
  margin-top: 128px;
}

.pet_box {
  display: flex;
  flex-flow: column;
  row-gap: 7.2px;
}

.pet_title {
  font-size: 1.7em;
  line-height: 1;
}

.pet_desc {
  width: 86%;
  font-size: 0.85em;
  line-height: 1.4;
}

/* ==========================================================================
   APARTMENTS PAGE — filter rail on the left, three-up card grid on the right
   ========================================================================== */

.wrapper_general.apartments_gen { padding: 10em 2rem; }

.h1.black.spec_amenities {
  margin: 0;
  color: var(--black);
  font-size: 4.5em;
  font-weight: 480;
  line-height: 1;
}

.apartments_sides {
  display: flex;
  margin-top: 6.3em;
}

/* the rail is a plain column on desktop and a drawer on phones */
.filters { width: 26%; }

.filter_heading { display: none; }

.filter_form { margin-bottom: 15px; }

.filters_flex {
  position: relative;
  display: flex;
  flex-flow: column;
  row-gap: 1.7em;
  padding-right: 5em;
}

.filters_box {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 0.8em;
}

.filters_box.last_filter { margin-top: 2.15em; }

.filter_title { font-size: 0.9em; }

.filters_wrap {
  display: flex;
  column-gap: 6px;
}

.clear_btn,
.checkbox {
  border: 0.8px solid rgba(41, 41, 41, 0.25);
  border-radius: 0.2em;
  color: var(--black);
  font-size: 0.8em;
  line-height: 1;
  text-decoration: none;
}

.clear_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 1.5em;
  cursor: pointer;
  transition: 0.4s;
}

.checkbox {
  display: block;
  font-weight: 700;
  transition: 0.4s;
}

.checkbox_hide { display: none; }

.checkbox_txt,
.radio_txt {
  display: inline-block;
  padding: 1em 1.5em;
  font-weight: 480;
  line-height: 1;
  cursor: pointer;
}

/* price range ------------------------------------------------------------ */
.fs-rangeslider_wrapper {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 10.8px;
  border-radius: 4px;
  background-color: var(--white);
}

.fs-message {
  display: flex;
  grid-template-columns: 1fr;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: 3.6px;
  margin-bottom: 12px;
  color: #171717;
}

.fs-rangeslider_input {
  width: 100%;
  height: 38px;
  padding: 1.5em 1em;
  border: 0.8px solid #ccc;
  border-radius: 0.25em;
  background-color: var(--white);
  color: var(--black);
  font-family: inherit;
  font-size: 0.8em;
  line-height: 1.43;
}

.dash_field { font-size: 0.8em; }

.fs-rangeslider_track {
  position: relative;
  width: 98%;
  height: 1.8px;
  margin-left: 0.5em;
  border-radius: 999rem;
  background-color: #e1e1e1;
}

.fs-rangeslider_handle {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 100rem;
  background-color: var(--black);
  cursor: grab;
  transform: translate(-8px, -8px);
}

.fs-rangeslider_handle-value {
  position: absolute;
  top: calc(100% + 1em);
  left: 0;
  margin-bottom: -2em;
  font-size: 0.8em;
  line-height: 1;
  white-space: nowrap;
}

.fs-rangeslider_fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background-color: var(--black);
}

.buttons_filters { display: none; }

/* card grid -------------------------------------------------------------- */
.apartments_box {
  width: 70%;
  margin-left: 4%;
}

.apartments_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 48px;
  column-gap: 0.8em;
}

.apart_image.grid_apartments {
  position: relative;
  width: 100%;
  height: 23em;
  border-radius: 0.3em;
  overflow: hidden;
}

.grid_apartments .overlay_tags {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-flow: column;
  padding: 0.7em;
}

.carousel_parent_apartments {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel_list {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel_item { flex: 0 0 auto; }

.carousel_apartments {
  display: block;
  width: 100%;
  height: 100%;
}

.image_carousel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* arrows and dots, drawn over the photo */
.apartments-grid-carousel-ui {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.2em;
  height: 1.2em;
  padding: 0 0 3px;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: #010101;
  font-size: 1.25em;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: opacity 0.22s ease;
}

.carousel-prev { left: 0.625em; transform: translateY(-50%) translateX(1px); }
.carousel-next { right: 0.625em; transform: translateY(-50%) translateX(-1px); }

@media (hover: hover) and (pointer: fine) {
  .grid_apartments .carousel-prev,
  .grid_apartments .carousel-next {
    opacity: 0;
    pointer-events: none;
  }

  .grid_apartments.is-arrows-visible .carousel-prev,
  .grid_apartments.is-arrows-visible .carousel-next {
    opacity: 1;
    pointer-events: auto;
  }
}

.carousel-dots {
  --carousel-dot-slot: 0.625em;
  position: absolute;
  right: 0.625em;
  bottom: 1.25em;
  z-index: 26;
  width: calc(5 * var(--carousel-dot-slot));
  max-width: calc(100% - 1.25em);
  overflow: hidden;
  pointer-events: auto;
}

.carousel-dots-track {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel-dots-slot {
  flex: 0 0 var(--carousel-dot-slot);
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-dot {
  display: block;
  width: 0.375em;
  height: 0.375em;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  opacity: 0.65;
  cursor: pointer;
  transform: scale(0.92);
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1), height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-dot.is-active {
  width: 0.45em;
  height: 0.45em;
  opacity: 1;
  transform: scale(1);
}

.grid_apartments + .content_apart .apart_title_line { margin-top: 0.7em; }

.apartments_grid .content_apart {
  display: flex;
  flex-flow: column;
  width: 100%;
  margin-top: 0;
}

.apartments_grid .explore_button { margin-top: 1.25em; }

.mnth_txt {
  margin-bottom: 0.875em;
  font-size: 0.8em;
  opacity: 0.55;
}

/* the filter drawer's trigger only exists on narrow screens */
.fix_filter { display: none; }

/* ==========================================================================
   FAQ PAGE — heading, sticky side note, long question list
   ========================================================================== */

.wrapper_general.base_ab { padding: 12em 2rem 7em; }

.h1.black.gen_h {
  margin: 0;
  color: var(--black);
  font-size: 5em;
  font-weight: 480;
  line-height: 1.1;
}

.faq_sides {
  display: flex;
  margin-top: 7em;
}

/* left column: the chip rail plus the lamp that lights when a question opens */
.tabs_ill { width: 31%; }

.sticky_side {
  position: sticky;
  top: 7.5em;
}

.anchors {
  display: flex;
  row-gap: 8px;
  column-gap: 6px;
}

.list_anchors {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.4em;
  column-gap: 0.3em;
}

.chip_btn:hover { border-color: rgba(41, 41, 41, 0.5); }

.chip_btn {
  display: block;
  max-width: 100%;
  padding: 1em 1.25em;
  border: 0.8px solid rgba(41, 41, 41, 0.25);
  transition: border-color 0.3s ease;
  border-radius: 0.25em;
  color: var(--black);
  font-size: 0.8em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.4s;
}

.ill_lamp { margin-top: 24em; }

.lamp_box {
  width: 11em;
  height: 11em;
  transform: rotateY(180deg);
}

.faq_lamp {
  width: 100%;
  overflow: hidden;
}

/* the beam and the bulb are dim until a question is open */
.faq_lamp path[fill="#feba01"],
.faq_lamp circle[fill="#feba01"] {
  fill-opacity: 0.12;
  transition: fill-opacity 0.22s ease;
}

.faq_lamp.is-on path[fill="#feba01"],
.faq_lamp.is-on circle[fill="#feba01"] { fill-opacity: 0.95; }

.faq_lamp .lamp-head {
  transform-box: fill-box;
  transform-origin: 55% 35%;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq_lamp.is-on .lamp-head { transform: rotate(-6deg); }
.faq_lamp.is-off .lamp-head { transform: rotate(2deg); }
.faq_lamp .lamp-head.is-nod { animation: lampNod 0.28s ease; }

@keyframes lampNod {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(-9deg); }
  100% { transform: rotate(-6deg); }
}

/* right column: the grouped question list */
.faq_list {
  width: 50%;
  margin-left: 19%;
}

.faq_l {
  display: flex;
  flex-flow: column;
  row-gap: 6em;
}

.faq_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.4em;
}

.title_faq {
  font-size: 2.2em;
  line-height: 1;
}

.count {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 2.35em;
  height: 2.35em;
  background-color: var(--primary);
  border-radius: 0.1875em;
  font-size: 0.85em;
  line-height: 1;
}

.q_list {
  display: flex;
  flex-flow: column;
  border-top: 0.8px solid rgba(41, 41, 41, 0.2);
}

/* ==========================================================================
   HEADER COLOUR MODES (driven by the section under the header)
   ========================================================================== */

.logo { color: var(--black); }
.menu { background-color: var(--black); }

@media (min-width: 992px) {
  body.is-hero .logo,
  body.is-dark .logo { color: var(--white); }
  body.is-light .logo { color: var(--black); }

  body.is-hero .menu {
    background-color: rgba(0, 0, 0, 0.11);
  }
}


/* ==========================================================================
   BLOCKS ARRIVING
   Used by blocksArrive() in app.js. The hiding class is only ever put on an
   element that is below the fold, and it is taken off the moment the element
   intersects, so nothing can be left invisible if a trigger never fires.
   ========================================================================== */

.will-arrive {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.has-arrived {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .will-arrive,
  .has-arrived {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================


/* ==========================================================================
   THE UNDERLINE MARKS

   Each mark declares two masks: --solo is its stroke on its own, --duo is
   that stroke with the grey trace running under it. Which one is used is
   decided below, by context rather than by drawing: the same mark is black
   over one heading and lilac over another, and only the lilac ones carry a
   trace.

   Drawn on a 300x34 canvas and used as masks, so each takes the colour of
   the heading it belongs to.
   ========================================================================== */

/* black by default: the stroke alone */
.scribble-wrap { --scribble: var(--solo); }

/* no mark carries a trace any more; --duo is kept so one can come back */

.scribble-wrap {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M9 22C50 19 90 24 140 21C176 19 196 26 218 21C236 17 252 27 268 21C278 17 286 25 293 20' stroke='%23000' stroke-width='4.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M9 22C50 19 90 24 140 21C176 19 196 26 218 21C236 17 252 27 268 21C278 17 286 25 293 20' stroke='%23000' stroke-width='4.4' stroke-linecap='round'/%3E%3Cpath d='M11 25C52 22 92 27 142 24C178 22 198 29 220 24C238 20 254 30 270 24C280 20 287 28 292 23' stroke='%23000' stroke-width='2.2' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="1"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M10 23C48 21 88 25 136 22C170 20 190 27 212 22C228 18 244 28 262 21C274 17 284 25 292 21' stroke='%23000' stroke-width='4.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M10 23C48 21 88 25 136 22C170 20 190 27 212 22C228 18 244 28 262 21C274 17 284 25 292 21' stroke='%23000' stroke-width='4.8' stroke-linecap='round'/%3E%3Cpath d='M12 26C49 24 89 28 137 25C171 23 191 30 213 25C229 21 245 31 263 24C275 20 285 28 291 24' stroke='%23000' stroke-width='2.4' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="2"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M10 21C48 19 92 22 134 20C150 19 158 27 170 21C180 15 188 28 200 21C210 15 218 28 230 21C240 15 248 27 260 21C270 16 282 24 292 20' stroke='%23000' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M10 21C48 19 92 22 134 20C150 19 158 27 170 21C180 15 188 28 200 21C210 15 218 28 230 21C240 15 248 27 260 21C270 16 282 24 292 20' stroke='%23000' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M12 24C49 22 93 25 135 23C151 22 159 30 171 24C181 18 189 31 201 24C211 18 219 31 231 24C241 18 249 30 261 24C271 19 282 27 291 23' stroke='%23000' stroke-width='2.3' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="3"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M11 9c.6 9.6 2.6 15.3 7.1 16.2C36 27 58 22 82 23C112 25 138 19 162 22C180 24 192 15 206 21C218 27 226 15 240 21C252 26 260 15 272 21C280 25 288 17 293 21' stroke='%23000' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M11 9c.6 9.6 2.6 15.3 7.1 16.2C36 27 58 22 82 23C112 25 138 19 162 22C180 24 192 15 206 21C218 27 226 15 240 21C252 26 260 15 272 21C280 25 288 17 293 21' stroke='%23000' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 12c.6 9 2.6 14.4 7 15.3C37 29 59 24 83 25C113 27 139 21 163 24C181 26 193 18 207 23C219 29 227 18 241 23C253 28 261 18 273 23C281 27 288 20 292 23' stroke='%23000' stroke-width='2.4' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="4"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M8 24C40 22 70 26 110 23C130 21 140 27 158 23C172 19 182 29 200 22C212 16 220 30 236 21C246 14 252 31 264 20C272 15 282 26 293 19' stroke='%23000' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M8 24C40 22 70 26 110 23C130 21 140 27 158 23C172 19 182 29 200 22C212 16 220 30 236 21C246 14 252 31 264 20C272 15 282 26 293 19' stroke='%23000' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 26C41 24 72 28 112 25C131 23 141 29 159 25C173 21 183 31 201 24C213 18 221 32 237 23C247 16 253 33 265 22C273 17 283 28 292 21' stroke='%23000' stroke-width='2.6' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="5"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M12 22C26 16 38 27 54 21C70 15 82 26 98 20C114 15 126 26 142 20C158 15 170 26 186 20C202 15 214 27 230 21C246 16 258 27 274 21C282 18 289 23 293 21' stroke='%23000' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M12 22C26 16 38 27 54 21C70 15 82 26 98 20C114 15 126 26 142 20C158 15 170 26 186 20C202 15 214 27 230 21C246 16 258 27 274 21C282 18 289 23 293 21' stroke='%23000' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M14 25C28 19 40 30 56 24C72 18 84 29 100 23C116 18 128 29 144 23C160 18 172 29 188 23C204 18 216 30 232 24C248 19 260 30 276 24C283 21 289 26 292 24' stroke='%23000' stroke-width='1.5' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="6"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M10 16C48 28 108 32 168 28C194 26 212 22 228 25C238 27 246 19 256 24C264 28 272 18 280 23C286 26 291 20 293 22' stroke='%23000' stroke-width='4.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M10 16C48 28 108 32 168 28C194 26 212 22 228 25C238 27 246 19 256 24C264 28 272 18 280 23C286 26 291 20 293 22' stroke='%23000' stroke-width='4.4' stroke-linecap='round'/%3E%3Cpath d='M12 19C49 30 109 34 169 30C195 28 213 25 229 27C239 29 247 22 257 26C265 30 273 21 281 25C287 28 291 23 292 25' stroke='%23000' stroke-width='2.4' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="7"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M11 24C48 20 88 27 128 22C166 17 206 26 244 21C262 18 280 25 291 21' stroke='%23000' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M11 24C48 20 88 27 128 22C166 17 206 26 244 21C262 18 280 25 291 21' stroke='%23000' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M14 22C50 19 90 26 130 21C168 17 208 25 246 20C264 18 281 24 290 20' stroke='%23000' stroke-width='2.4' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="8"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M10 23C58 20 118 19 168 22C198 24 218 28 238 23C254 19 262 12 276 16C284 19 288 15 293 10' stroke='%23000' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M10 23C58 20 118 19 168 22C198 24 218 28 238 23C254 19 262 12 276 16C284 19 288 15 293 10' stroke='%23000' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 26C59 23 119 22 169 25C199 27 219 31 239 26C255 22 263 15 277 19C285 22 289 18 292 13' stroke='%23000' stroke-width='2.4' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="9"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M11 21C42 16 74 26 106 20C136 14 168 25 198 19C224 14 250 23 272 19C282 17 288 22 291 19' stroke='%23000' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M11 21C42 16 74 26 106 20C136 14 168 25 198 19C224 14 250 23 272 19C282 17 288 22 291 19' stroke='%23000' stroke-width='3.8' stroke-linecap='round'/%3E%3Cpath d='M13 25C31 20 43 30 57 24C71 19 83 29 97 23C111 18 123 29 137 23C151 18 163 28 177 23C191 18 203 28 217 23C233 19 253 25 269 23' stroke='%23000' stroke-width='2.3' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M18 17C71 12 141 21 201 15C231 12 255 18 267 15' stroke='%23000' stroke-width='1.5' stroke-linecap='round' opacity='.32'/%3E%3C/svg%3E");
}

.scribble-wrap[data-scribble="hero"] {
  --solo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M9 22C44 20 78 24 116 21C146 19 172 24 196 21C214 19 228 27 244 20C256 15 266 29 278 20C284 15 289 25 293 19' stroke='%23000' stroke-width='5.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --duo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M9 22C44 20 78 24 116 21C146 19 172 24 196 21C214 19 228 27 244 20C256 15 266 29 278 20C284 15 289 25 293 19' stroke='%23000' stroke-width='5.2' stroke-linecap='round'/%3E%3Cpath d='M11 24C52 21 93 27 143 23C179 21 199 29 221 23C239 19 255 29 271 23C281 19 287 27 292 22' stroke='%23000' stroke-width='2.5' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}