:root {
  --dur-s: 0.4s;
  --dur-m: 0.8s;
  --dur-l: 1.2s;

  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-write: cubic-bezier(0.333, 0, 0.667, 1);

  --_100svh: 100vh;
}

html {
  font-size: 1vw;
}

/* ================= BTN ================= */

[hover-btn] {
  --btn-dur: var(--dur-m);
  --btn-ease: var(--ease-in-out);

  --btn-text-c: var(--_colors---base-1000--primary);
  --btn-bg-t: 100%;
  --btn-bg-br: 100%;

  transition: var(--btn-dur) var(--btn-ease);
}

[hover-btn] [hover="text"],
[hover-btn] .ico {
  color: var(--btn-text-c);
  transition: var(--btn-dur) var(--btn-ease);
}

[hover-btn] [hover="bg"] {
  inset: var(--btn-bg-t) 0% auto;
  border-radius: var(--btn-bg-br);
  transition: var(--btn-dur) var(--btn-ease);
}

@media (min-width: 992px) {

  [hover-btn]:hover,
  [hover-btn-trigger]:hover [hover-btn] {
    --btn-text-c: var(--_colors---base-0--primary);
    --btn-bg-t: 0%;
    --btn-bg-br: 0%;
  }
}

/* ================= NAV ================= */

[hover-nav-item-l2] {
  --nav-dur: var(--dur-m);
  --nav-ease: var(--ease-out);

  --t1-y: 0%;
  --t1-o: 1;
  --t2-y: 100%;
  --t2-o: 0;
}

[hover-nav-item-l2] [hover="text"]:nth-child(1) {
  transform: translateY(var(--t1-y));
  opacity: var(--t1-o);
  transition: var(--nav-dur) var(--nav-ease);
}

[hover-nav-item-l2] [hover="text"]:nth-child(2) {
  transform: translateY(var(--t2-y));
  opacity: var(--t2-o);
  transition: var(--nav-dur) var(--nav-ease);
}

@media (min-width: 992px) {

  [hover-nav-item-l2]:hover,
  [hover-nav-item-l2-trigger]:hover [hover-nav-item-l2] {
    --t1-y: -100%;
    --t1-o: 0;
    --t2-y: 0%;
    --t2-o: 1;
  }
}

/* ================= IMAGE CARD ================= */

[hover-img-card] [hover="img"] {
  transform: scale(1);
  transition: var(--dur-l) var(--ease-out);
}

@media (min-width: 992px) {
  [hover-img-card]:hover [hover="img"] {
    transform: scale(1.15);
  }
}

/* ================= APART CARD ================= */

[hover-apart-card] {
  --shadow-o: 0;
  --card-z: 0;
  z-index: var(--card-z);
}

[hover-apart-card] [hover="shadow"] {
  opacity: var(--shadow-o);
  transition: opacity 1.6s var(--ease-out);
}

@media (min-width: 992px) {
  [hover-apart-card]:hover {
    --shadow-o: 1;
    --card-z: 10;
  }
}

/* ================= SOCIAL ================= */

[hover-social] [hover="ico"] {
  transform: scale(1);
  transition: var(--dur-m) var(--ease-out);
}

@media (min-width: 992px) {

  [hover-social]:hover [hover="ico"],
  [hover-social-trigger]:hover [hover-social] [hover="ico"] {
    transform: scale(1.25);
  }
}

/* ================= GROUP ================= */

[data-hover-item] {
  transition: opacity var(--dur-m) var(--ease-out);
}

[data-hover-group]:has([data-hover-item]:hover) [data-hover-item]:not(:hover):not(.is-active) {
  opacity: 0.2;
}

/* ================= PAGINATION ================= */

[data-slider="pag"] .pag_prev .ico-16 {
  transform: translateX(10px);
  transition: var(--dur-m) var(--ease-out);
}

[data-slider="pag"] .pag_prev:hover .ico-16 {
  transform: translateX(0);
}

[data-slider="pag"] .pag_next .ico-16 {
  transform: translateX(-10px);
  transition: var(--dur-m) var(--ease-out);
}

[data-slider="pag"] .pag_next:hover .ico-16 {
  transform: translateX(0);
}

/* ================= DROPDOWN ================= */

[data-select] {
  --drop-o: 0;
  --drop-s: 1.1;
  --drop-y: 32px;
}

[data-select].is-open {
  --drop-o: 1;
  --drop-s: 1;
  --drop-y: 0px;
}

[data-select] [data-select="drop-down"] {
  opacity: var(--drop-o);
  transform: translateY(var(--drop-y)) scale(var(--drop-s));
  pointer-events: none;
}

[data-select].is-open [data-select="drop-down"] {
  pointer-events: auto;
}

/* ================= SELECT ITEM ================= */

[hover-select-item] {
  background: transparent;
  transition: var(--dur-s) var(--ease-out);
}

[hover-select-item]:hover {
  background: var(--_colors---base-1000--bg);
}

[hover-select-item].is-active {
  background: var(--_colors---base-1000--primary);
  pointer-events: none;
}

[hover-select-item] [hover="text"] {
  transition: var(--dur-s) var(--ease-out);
}

/* ================= HERO SPACING ================= */
/* .hero-s stacks (top spacer, title, bottom spacer) with
   justify-content:flex-start, so on desktop — where the big top spacer
   (.u-272.b-mob) is hidden — the title sat pinned near the top of the
   banner instead of centered. Center the stack instead of force-showing
   the mobile-only spacer, so the title sits centered with even breathing
   room above and below, and the arch/preloader reveal lines up with it. */


/* Give the hero banner a sane floor so it never gets too short/cramped
   on short viewports. */
.hero-w {
  min-height: 720px;
}

/* ================= MARQUEE ================= */

[data-marquee-css="track"] {
  animation: marquee 32s linear infinite reverse;
}

@keyframes marquee {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0%);
  }
}

/* ================= FLOATING TIP ================= */

.floating-tip {
  visibility: hidden;
}

.floating-tip .floating-tip-card {
  transform: translateY(-50%) scale(0.75);
  opacity: 0;
  transition: var(--dur-s) var(--ease-in);
}

.floating-tip.is-active {
  visibility: visible;
}

.floating-tip.is-active .floating-tip-card {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  transition: var(--dur-m) var(--ease-out);
}

/* ================= MASKS ================= */

.arch-intro-s_bg_l,
.arch-intro-s_bg_r {
  clip-path: inset(50% 50% 50% 500%);
}

/* ================= INITIALS ================= */

[data-parallax="img"],
[data-scroll-reveal="a"],
[data-scroll-reveal="h"],
[data-scroll-reveal="p"] {
  will-change: transform;
}

.split-line,
.split-word,
.split-char {
  display: inline-block;
  will-change: transform;
}


.arch-intro-s_bg_l,
.arch-intro-s_bg_r {
  clip-path: inset(50% 50% 50% 500%);
}

.cookies_card,
.floating-tip-card,
.filter_select_drop-down,
.apart-card_shadow {
  box-shadow: 0 224px 63px 0 rgba(0, 0, 0, 0), 0 143px 57px 0 rgba(0, 0, 0, 0.01), 0 81px 48px 0 rgba(0, 0, 0, 0.04), 0 36px 36px 0 rgba(0, 0, 0, 0.07), 0 9px 20px 0 rgba(0, 0, 0, 0.08);
}

@media (min-width: 992px) {
  .lot-s_info_t {
    mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 5.29%, #fff 84.62%, rgba(255, 255, 255, 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 5.29%, #fff 84.62%, rgba(255, 255, 255, 0) 100%);
  }
}

.contact-s_map_pin_c {
  --offset-y: calc(100% - var(--8px));
  --tail-l: calc(100% - (var(--16px) + var(--2px) + var(--16px)));
  --tail-c: calc(100% - (var(--16px) + var(--2px) + (var(--16px) / 2)));
  --tail-r: calc(100% - (var(--16px) + var(--2px)));
  clip-path: polygon(0% 0%, 100% 0%, 100% var(--offset-y), var(--tail-r) var(--offset-y), var(--tail-c) 100%, var(--tail-l) var(--offset-y), 0% var(--offset-y));
}

[data-preloader] {
  display: flex;
  --arch-w: 36vw;
  --arch-h: calc(var(--arch-w) / (560 / 2592));
  --arch-y: 100vh;
  --preloader-color: #C7955D;
}

@property --preloader-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #C7955D;
}

[data-preloader].is-arch-phase {
  --preloader-color: #1F3D2B;
}

/* ================= PRELOADER ARCH REVEAL ================= */
/* Standard "shape with a see-through hole" technique, in place of the old
   mask-image trick: .preloader_bg_arch_is-1 keeps NO background of its
   own (transparent), so its own body always shows whatever is directly
   behind the whole preloader stack — the real hero section — while a
   huge box-shadow (spread out to 100vmax, far past any screen size)
   paints the solid colour everywhere OUTSIDE that shape. The shape is
   still sized/grown by the exact same --arch-w / --arch-h custom
   properties hero.js already animates on [data-preloader] — untouched —
   so the growth animation, timing and easing are identical to before;
   only how the colour is painted is different.

   .preloader_bg (the flat tan rectangle) is what phase 1 (logo only)
   shows; once is-arch-phase is added it's turned transparent so it can't
   block the newly-revealed hole, leaving the box-shadow as the only
   solid layer — which correctly excludes the arch shape. */

[data-preloader].is-arch-phase .preloader_bg {
  background-color: transparent;
}

.preloader_bg_arch_is-1 {
  background-color: transparent;
  box-shadow: 0 0 0 100vmax var(--preloader-color);
  opacity: 0;
  outline: none;
  transition: box-shadow .6s ease;
}

[data-preloader].is-arch-phase .preloader_bg_arch_is-1 {
  opacity: 1;
}

.preloader_bg_arch_is-2 {
  opacity: 0;
}

[data-preloader].is-arch-phase .preloader_bg_arch_is-2 {
  opacity: 1;
}

/* Slide 1 = tan background + logo mark only.
   Slide 2 = green background + growing arch, no logo.
   Fade the logo out right as the arch phase begins so the two read as
   clean, separate slides instead of the logo lingering over the green. */
.preloader_t {
  opacity: 1;
  transition: opacity .4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo_symbol img {
  width: 378px;
  height: auto;
}

[data-preloader].is-arch-phase .preloader_t {
  opacity: 0;
}

[data-parallax='img'],
[data-parallax='img-out'],
[data-scroll-reveal='a'],
[data-scroll-reveal='h'],
[data-scroll-reveal='p'],
[data-scroll-reveal='slide'],
[data-scroll-reveal='ctn'] {
  will-change: transform;
}

.split-line,
.split-word,
.split-char {
  display: inline-block;
  will-change: transform;
}

.split-line-mask,
.split-word-mask,
.split-char-mask {
  display: inline-block;
  line-height: inherit;
  vertical-align: top;
}

.header,
.modal {
  padding-right: var(--scrollbar-width, 0px);
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 0px white inset !important;
  -webkit-text-fill-color: var(--_colors---base-1000--100) !important;
  background-clip: text !important;
}

.a1,
.a2 {
  .split-char {
    padding-left: var(--_units---u-160);
    padding-right: var(--_units---u-160);
    margin-left: calc(var(--_units---u-160) * -1);
    margin-right: calc(var(--_units---u-160) * -1);
    padding-top: var(--_units---u-32);
    padding-bottom: var(--_units---u-32);
    margin-top: calc(var(--_units---u-32) * -1);
    margin-bottom: calc(var(--_units---u-32) * -1);
  }
}

@media (max-width: 991px) {
  .input_field.l1 {
    font-size: calc(16rem / var(--_special-units---scale-ratio));
  }
}

.loc-w_clouds .marquee_list_item:nth-child(even) {
  transform: scaleY(-1);
}

/* ================= BIRDS VIDEO (loc-w_bg) ================= */
/* Background video of birds flying, layered behind the clouds marquee's
   gradient overlay but on top of the fallback/poster image, in the same
   spirit as .hero-video in hero.css. */
.birds-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 60%;
  object-fit: cover;
  pointer-events: none;
}

/* ================= GALERIE SKY / CLOUDS ================= */
/* Decorative pale-blue "sky" backdrop behind the logo + GALERIE heading,
   with the site's existing drifting-clouds marquee inside it (same images
   + @keyframes marquee already used in the location section's
   .loc-w_clouds). Purely decorative, so it's aria-hidden and
   pointer-events:none, and sits behind the real content via z-index. */

.benefits-intro-w {
  position: relative;
}

.benefits-intro_sky {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 42vw;
  min-height: 320px;
  max-height: 900px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  /* border-radius: 0 0 50% 50% / 0 0 28% 28%; */
  /* background: radial-gradient(120% 100% at 50% 0%, #eef4f8 0%, #e4edf3 55%, rgba(228, 237, 243, 0) 100%); */
}

.benefits-intro_sky_clouds {
  position: absolute;
  inset: 0;
  opacity: 1;
}

.benefits-intro_sky_clouds .marquee {
  width: 100%;
  height: 100%;
}

.benefits-intro_sky_clouds .clouds {
  opacity: 0.9;
}

.benefits-intro-s {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .benefits-intro_sky {
    height: 70vw;
    min-height: 260px;
  }
}

/* ================= CONNECT SECTION ================= */
/* Append this block to short.css. Uses the site's existing design tokens
   (--_units, --_colors, --_fonts from hero.css) for spacing/type/line-color,
   plus two new locally-scoped variables for this section's own tan/green
   palette — scoped to .connect-s, not :root, so nothing else is affected. */

.connect-s {
  --connect-bg: #c19566;
  --connect-heading: #2b3e30;
  background-color: var(--connect-bg);
  padding-top: var(--_units---u-96);
  padding-bottom: 320px;
}

#connect .container {
  max-width: 1500px;
  margin: 0 auto;
}

.connect-s_heading,
.connect-s_location .l1,
.connect-s_feature_eyebrow,
.connect-s_feature_heading {
  color: var(--connect-heading);
}

h2.connect-s_heading {
  font-family: 'ambroise-francois-std';
  font-weight: 500;
  font-style: Regular;
  font-size: 80px;
  line-height: 110.00000000000001%;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #1F3D2B;
}

.connect-s_top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--_units---u-32);
  align-items: end;
  margin-bottom: 119px;
}

.connect-s_intro {
  justify-self: end;
  max-width: 380px;
  font-family: 'Maison Neue';
  font-weight: 400;
  font-style: Book;
  font-size: 18px;
  color: #000;
  leading-trim: CAP_HEIGHT;
  line-height: 130%;
  letter-spacing: 0%;
}

.connect-s_listing {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--_units---u-48);
  align-items: start;
  margin-bottom: var(--_units---u-96);
}

.connect-s_location {
  display: flex;
  align-items: center;
  gap: var(--_units---u-8);
  margin-bottom: var(--_units---u-24);
}

.connect-s_location .l1 {
  font-family: 'Maison Neue';
  font-weight: 500;
  font-style: Medium;
  font-size: 30px;
  leading-trim: CAP_HEIGHT;
  line-height: 160%;
  letter-spacing: 0%;
  color: #000000;
}

.connect-s_listing_right .img-w {
  right: 0px;
  width: 527px;
  height: 418px;
  position: absolute;
  border-radius: 0px;
  overflow: hidden;
}


.connect-s_listing_left {
  margin-top: 80px;
}

/* ================= UNITS TABLE ================= */

.units-table {
  /* border-top: 1px solid var(--_colors---base-1000--line); */
}

.units-table_head,
.units-table_row_grid {
  display: grid;
  grid-template-columns: .6fr .6fr .6fr .7fr 1.6fr .9fr .8fr;
  gap: var(--_units---u-8);
  align-items: center;
}

.units-table_head {
  padding: var(--_units---u-16) 0;
  border-bottom: 1px solid #000;
  font-family: Luminova;
  font-weight: 900;
  color: #000;
  font-size: 14px;
  line-height: 110.00000000000001%;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.units-table_row {
  position: relative;
  border-bottom: 1px solid #9C9C9C;
}

.units-table_row_grid {
  padding: 31px 0px;
  font-weight: 400;
  height: 86px;
  font-size: 14px;
  line-height: 110.00000000000001%;
  letter-spacing: 0%;
  font-family: 'Luminova';
  color: #000;
  transition: var(--dur-m) var(--ease-out);
}

.connect-s_bottom {
  max-width: 1100px;
  margin: -300px auto 0px auto;
  /* height: 621px; */
}

.connect-s_bottom .img.h-auto {
  width: 1100px;
  height: 621px;
}

.units-table_soft {
  opacity: .65;
}

/* ================= [hover-unit-row] — row hover reveals the download btn ================= */
/* Same attribute-hover idiom as [hover-btn] / [hover-apart-card] above:
   desktop-only hover (matches the site's breakPoint = 992 in hero.js),
   with an always-visible fallback on touch. */

.units-table_download {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  font-family: 'Luminova';
  font-weight: 900;
  border: 0px;
  font-size: 14px;
  color: #214939;
  line-height: 110.00000000000001%;
  letter-spacing: 0%;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
  padding: 0px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: var(--dur-m) var(--ease-out);
}

.units-table_download:hover {
  background-color: transparent;
}

@media (min-width: 992px) {
  [hover-unit-row]:hover .units-table_row_grid {
    /* filter: blur(7.7px); */
    opacity: 1;
  }

  [hover-unit-row]:hover .units-table_download {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  .units-table_download {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    margin: var(--_units---u-8) 0 0;
    width: max-content;
  }
}

/* ================= FEATURE / CTA BLOCK ================= */

.connect-s_feature {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 81px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_units---u-16);
}

.connect-s_feature_eyebrow {
  font-family: 'Maison Neue';
  font-weight: 400;
  font-style: Book;
  font-size: 16px;
  color: #000;
  line-height: 125%;
  letter-spacing: 0%;
  text-transform: uppercase;
}

.connect-s_feature_heading {
  text-transform: none;
  font-family: 'Maison Neue';
  font-weight: 500;
  color: #000;
  font-size: 24px;
  leading-trim: CAP_HEIGHT;
  line-height: 160%;
  letter-spacing: 0%;
  text-align: center;
  line-height: 1.5;
}

a.btn-outline.connect-s_feature_btn {
  border: 1px solid #435B70;
  font-family: 'Maison Neue';
  font-weight: 700;
  min-width: 158px;
  justify-content: space-between;
  color: #000;
  font-style: Bold;
  margin-top: 20px;
  font-size: 12px;
  leading-trim: CAP_HEIGHT;
  line-height: 117%;
  letter-spacing: 12%;
  text-transform: uppercase;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 991px) {

  .connect-s_top,
  .connect-s_listing {
    grid-template-columns: 1fr;
  }

  .connect-s_intro {
    justify-self: start;
    max-width: 100%;
  }

  .connect-s_listing_right {
    order: -1;
  }

  .units-table_head,
  .units-table_row_grid {
    grid-template-columns: .55fr .55fr .55fr .7fr 1.4fr .85fr .75fr;
    font-size: 11px;
  }
}

@media (max-width: 767px) {

  .units-table_head,
  .units-table_row_grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .units-table_head span:nth-child(n + 5),
  .units-table_row_grid span:nth-child(n + 5) {
    display: none;
  }
}



/* ================= CONTACT SECTION ================= */
/* Append this block to short.css. Reuses --_units/--_colors/--_fonts from
   hero.css, plus .input_field/.btn-outline/.marquee* which already exist
   there. Two locally-scoped variables (--contact-heading, --contact-brand)
   are new, scoped to .contact-s only. */

.contact-s {
  --contact-heading: #2b3e30;
  padding-top: 200px;
  overflow: clip;
  background: #fff;
  position: relative;
}

.contact-s .container {
  max-width: 1500px;
  margin: 0 auto;
}

.contact-s_heading {
  color: #1F3D2B;
  margin-bottom: 70px;
  font-family: 'ambroise-francois-std';
  font-weight: 500;
  font-size: 80px;
  line-height: 110.00000000000001%;
  letter-spacing: 0%;
  text-transform: uppercase;
}

.contact-s_grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--_units---u-48);
  align-items: start;
}

/* ---- form layout ---- */

.contact-s_form {
  display: flex;
  flex-direction: column;
  gap: var(--_units---u-32);
}

.contact-s_row.cols-3 {
  display: grid;
  grid-template-columns: .8fr 1fr 1fr;
  gap: var(--_units---u-24);
}

.contact-s_row.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--_units---u-24);
}

.contact-s_row.cols-1 {
  display: grid;
}


.contact-s_label {
  display: block;
  margin-bottom: 17px;
  color: #000;
  font-family: 'Maison Neue';
  font-weight: 400;
  font-style: Regular;
  font-size: 12px;
  leading-trim: CAP_HEIGHT;
  line-height: 164%;
  letter-spacing: 0%;
}

/* ---- text / email / tel / textarea ---- */
/* .input_field already exists in hero.css (centered, for the small modal
   form) — override alignment/sizing here for this full-width layout. */
.contact-s_field .input_field {
  width: 100%;
  height: auto;
  padding: 0px 0px 10px 0px;
  text-align: left;
  font-family: 'Maison Neue';
  font-size: 16px;
  color: #A8A8A8;
}

.contact-s_field .input_field::placeholder {
  color: var(--_colors---base-1000--gray-text);
  opacity: .8;
}

.contact-s_textarea {
  /* resize: none; */
  min-height: 40px;
}

.contact-s_submit {
  align-self: flex-start;
  background: transparent;
  border: 1px solid #435B70;
  font-family: 'Maison Neue';
  font-weight: 700;
  min-width: 158px;
  justify-content: space-between;
  color: #000;
  font-style: Bold;
  margin-top: 20px;
  font-size: 12px;
  leading-trim: CAP_HEIGHT;
  line-height: 117%;
  letter-spacing: 12%;
  text-transform: uppercase;
}

.contact-s_field .input_field.area {
  min-height: 40px;
  ;
}

/* ---- selects ---- */

.contact-s_select-w {
  position: relative;
}

.contact-s_select-w.wide {
  /* max-width: 66%; */
}

.contact-s_select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: var(--_units---u-24);
  cursor: pointer;
}

.contact-s_select-ico {
  position: absolute;
  right: var(--_units---u-8);
  top: 33%;
  transform: translateY(-50%);
  color: var(--contact-heading);
  pointer-events: none;
}

/* ---- checkboxes ---- */

.contact-s_checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_units---u-16) var(--_units---u-24);
}

.contact-s_checkbox {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-family: 'Maison Neue';
  font-weight: 500;
  font-size: 15px;
  color: #6E6E6E;
}

.contact-s_checkbox-box {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--_colors---base-1000--line);
  border-radius: 3px;
  transition: var(--dur-s) var(--ease-out);
}

.contact-s_checkbox-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.contact-s_checkbox-box::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background-color: var(--contact-heading);
  transform: scale(0);
  transition: var(--dur-s) var(--ease-out);
}

.contact-s_checkbox-box:has(:checked) {
  border-color: var(--contact-heading);
}

.contact-s_checkbox-box:has(:checked)::after {
  transform: scale(1);
}

.contact-s_legal {
  align-items: flex-start;
}

.contact-s_legal .contact-s_checkbox-box {
  margin-top: 2px;
}

/* ---- submit ---- */

.contact-s_submit {
  align-self: flex-start;
}

section#spSection {
  padding: 139px 20px 0px;
}

/* ---- right-side staggered images ---- */

.contact-s_right {
  /* position: relative; */
  min-height: 620px;
}

.contact-s_img {
  position: absolute;
}

.contact-s_img .img-w {
  border-radius: 0px;
  overflow: hidden;
}

.contact-s_img-a {
  top: 18%;
  right: 21%;
  z-index: 4;
  height: 100%;
}

.contact-s_img-a .img-w img {
  width: 374px;
  height: 259px;
}

.contact-s_img-b {
  top: 31%;
  right: 0;
  height: 100%;
}



.contact-s_img-b .img-w img {
  width: 630px;
  height: 520px;
}

/* ---- giant ARBORIA wordmark — static text, no marquee/animation ---- */

.contact-s_brand {
  margin-top: -200px;
  padding: 200px 0px 0px 0px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f1e4 45%, #f1e2c8 100%);
  overflow: hidden;
  text-align: center;
}

.contact-s_brand_word {
  margin: 0;
  margin-bottom: -250px;
  line-height: 1;
  font-family: 'ambroise-francois-std';
  font-weight: 500;
  font-size: 553.33px;
  leading-trim: CAP_HEIGHT;
  line-height: 110.00000000000001%;
  letter-spacing: 0%;
  text-transform: uppercase;
  text-transform: uppercase;
  color: #FFF5E4;
  white-space: nowrap;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 991px) {
  .contact-s_grid {
    grid-template-columns: 1fr;
  }

  .contact-s_right {
    /* order: -1; */
    min-height: 420px;
  }

  .contact-s_row.cols-3,
  .contact-s_row.cols-2 {
    grid-template-columns: 1fr;
    gap: var(--_units---u-16);
  }

  .contact-s_select-w.wide {
    max-width: 100%;
  }
}



/* ================= FOOTER ================= */
/* Append this block to short.css. Reuses --_units/--_colors/--_fonts,
   .l1/.p1/.text-link, and .img-w/.img from hero.css. --footer-heading and
   --footer-accent are the only new (locally-scoped, not :root) tokens. */
footer {
  --footer-heading: #2b3e30;
  --footer-accent: #7e8e6c;
  position: relative;
  padding-top: 142px;
  overflow: clip;
  max-width: 1500px;
  margin: 0 auto;
}

/* ---- back to top ---- */

.footer_top-btn {
  position: absolute;
  top: var(--_units---u-48);
  right: var(--_units---u-48);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--footer-heading);
  color: #fff;
  transition: background-color var(--dur-m) var(--ease-in-out);
}

.footer_top-btn:hover {
  background-color: var(--footer-accent);
}

/* ---- top row: address / contact / monogram ---- */

.footer_top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--_units---u-32);
  align-items: start;
  padding-bottom: var(--_units---u-64);
}

.footer_label {
  display: block;
  font-family: Luminova;
  font-weight: 900;
  font-size: 14px;
  line-height: 118%;
  vertical-align: middle;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 11px;
}

.footer_label-sm {
  color: #7E8E6C;
  margin-bottom: var(--_units---u-8);
  font-family: Luminova;
  font-weight: 900;
  font-size: 12.59px;
  line-height: 144%;
  letter-spacing: 0%;
  vertical-align: middle;
  text-transform: uppercase;
}

.footer_monogram img {
  width: 300px;
}

.footer_address {
  color: #000;
  font-family: 'Maison Neue';
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0%;
}

.footer_col-contact {
  display: flex;
  flex-direction: column;
  gap: var(--_units---u-24);
}

.footer_link {
  color: #7E8E6C;
  margin-bottom: var(--_units---u-8);
  font-family: Luminova;
  font-weight: 900;
  font-size: 15.11px;
  line-height: 144%;
  letter-spacing: 0%;
  vertical-align: middle;
  text-transform: uppercase;
}

.footer_link.is-accent {
  color: var(--footer-accent);
}

.footer_monogram {
  position: relative;
  justify-self: end;
  text-align: center;
  line-height: 1;
}

.footer_monogram_letter {
  display: block;
  font-family: var(--_fonts---font-display);
  font-size: clamp(90px, 9vw, 130px);
  line-height: .82;
  color: var(--footer-heading);
}

.footer_monogram_twig {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 62%;
  transform: translate(-50%, -50%);
  color: var(--footer-accent);
}

/* ---- divider + bottom bar ---- */

.footer_divider {
  border-top: 1px solid #CDCDCD;
}

.footer_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0 60px;
}

.footer_bottom_text {
  font-family: 'Maison Neue';
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0%;
  color: #000;
}
.footer_disclaimer{
    max-width: 1440px;
    margin: 40px auto 0px;
}
.footer_disclaimer .footer_bottom_text{
  font-size: 12px;
  text-align: center;
}
/* ---- full-bleed photo marquee ---- */
/* Reuses the exact same [data-marquee-css="track"] animation already
   defined above for .loc-w_clouds (32s linear infinite reverse) — nothing
   new to declare for the motion itself, just sizing for these items. */
/*  
.footer_gallery_marquee {
  height: 46vw;
  max-height: 620px;
} */

.footer_gallery_marquee .marquee_list {
  gap: 0;
}

.footer_gallery_item {
  position: relative;
  width: 379px;

  height: 397px;
  overflow: hidden;
}

.footer_gallery_item .img-w {
  width: 100%;
  height: 100%;
  flex-flow: row;
}

.footer_gallery_item-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.footer_gallery_circle {
  width: 86%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

/* ================= RESPONSIVE ================= */

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

  .footer_monogram {
    grid-column: span 2;
    justify-self: start;
    margin-top: var(--_units---u-24);
  }

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

  .footer_gallery_item {
    width: 300px;
    height: 300px;
  }
}

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

  .footer_monogram {
    grid-column: auto;
  }

  .footer_bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_units---u-8);
  }

  .footer_top-btn {
    width: 52px;
    height: 52px;
    top: var(--_units---u-24);
    right: var(--_units---u-24);
  }
}

.building_betwen_clouds {
  margin-top: -400px
}

/* ================= PRELOADER: logo-only first frame ================= */
/* Requested sequence: (1) solid background colour with just the small
   circular logo mark showing, (2) the arch then grows and reveals the
   hero straight through it.

   .preloader_bg already gives the solid background, .preloader_t already
   holds only the small logo mark, and the arch (.preloader_bg_arch_is-1/
   is-2) is already transparent so it reveals the real hero underneath as
   it grows — none of that needs to change.

   The only thing standing between that and the reference is the big
   "WOHNÜBERBAUUNG BAUMSTRASSE / Schönenwerd" title (.preloader_c) and the
   progress bar + "ARBORIA Residence" tagline (.preloader_b), which
   currently fade in over the solid background before the arch starts
   growing. Hiding them is a pure visibility change — hero.js's GSAP
   timeline still runs underneath exactly as before (same durations, same
   arch growth, same handoff into the page), it just has nothing visible
   to animate for those two pieces, so the first frame reads as
   "logo on a solid colour" the way the reference does. */
.preloader_c,
.preloader_b {
  opacity: 0 !important;
  visibility: hidden !important;
}