/* Overrides for running the frozen Squarespace markup without its JS. */

/* Logo intro, first page of a visit only (intro.js adds .sp-intro-play).
   The arch draws up from the base and a rule sweeps out; then site.js flies
   the logo into its place in the header while the cream backdrop fades away. */
.sp-intro { display: none; }
html.sp-intro-play .sp-intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: rgb(236, 227, 218);
  pointer-events: none;
}
html.sp-intro-done .sp-intro { display: none; }
/* The real header logo waits invisibly for the flying one to land on it. */
html.sp-intro-play:not(.sp-intro-done) #header .header-title-logo img { opacity: 0; }
.sp-intro img {
  width: min(260px, 56vw);
  height: auto;
  clip-path: inset(100% 0 0 0);
  transform: translateY(14px) scale(0.97);
  animation: sp-draw 0.8s cubic-bezier(.22, 1, .36, 1) 0.05s forwards;
}
.sp-intro .sp-intro-rule {
  width: min(160px, 36vw);
  height: 1px;
  background: rgb(23, 48, 104);
  transform: scaleX(0);
  animation: sp-rule 0.55s cubic-bezier(.22, 1, .36, 1) 0.55s forwards;
}
@keyframes sp-draw {
  to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes sp-rule {
  to { transform: scaleX(1); }
}

/* Page-to-page transitions (Chrome, Edge, Safari 18.2+; others just navigate).
   Old page drifts up and fades, new page rises in; the header holds still. */
@view-transition { navigation: auto; }
#header { view-transition-name: sp-header; }
::view-transition-old(root) {
  animation: sp-page-out 0.35s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: sp-page-in 0.55s cubic-bezier(.22, 1, .36, 1) 0.1s both;
}
@keyframes sp-page-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes sp-page-in { from { opacity: 0; transform: translateY(32px); } }

/* Scroll reveals (site.js adds .sp-in as blocks enter the viewport). */
html.sp-reveal-ready:not(.sp-reveal-all) .sp-reveal:not(.sp-in) {
  opacity: 0;
  transform: translateY(28px);
}
.sp-reveal {
  transition: opacity 0.9s cubic-bezier(.22, 1, .36, 1), transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .sp-reveal { transition: none; }
}

/* ---- Layout refinements over the Squarespace original ---- */

/* NEXUS: the headline ran across the right-hand photo. Sit it on a cream
   panel so it reads as a deliberate card laid over both images. */
.fe-block-4987ee3a30c76c9474de {
  background: rgb(236, 227, 218);
  padding: 28px 36px;
  align-self: center;
  box-shadow: 0 18px 48px rgba(23, 48, 104, 0.12);
}
.fe-block-511ae735a891cb2c5869 { z-index: 5 !important; }

/* Current holdings: reserve two lines for every title so the cities line up,
   and pull each city up under its title. */
.fe-block-yui_3_17_2_1_1725814439672_45563 h4,
.fe-block-173c13bd7be2d526a390 h4,
.fe-block-6a1b7696fbe9ae5ca305 h4 {
  line-height: 1.25;
  min-height: 2.5em;
  margin: 0;
}
.fe-block-yui_3_17_2_1_1725814439672_45563 p,
.fe-block-173c13bd7be2d526a390 p,
.fe-block-6a1b7696fbe9ae5ca305 p {
  margin: 0.3em 0 0;
}

/* Square Park Approach: the four principles as one set (four across on wide
   screens, two by two below), with larger type to fill the width. */
.user-items-list-simple:has(> .list-item:nth-child(4):last-child) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 4vw !important;
  row-gap: 56px !important;
  padding-left: 4vw !important;
  padding-right: 4vw !important;
}
.user-items-list-simple:has(> .list-item:nth-child(4):last-child) > .list-item {
  width: auto !important;
  margin: 0 !important;
}
.user-items-list-simple:has(> .list-item:nth-child(4):last-child) .list-item-content__title {
  font-size: clamp(26px, 2.3vw, 36px) !important;
  margin-bottom: 0.5em !important;
}
.user-items-list-simple:has(> .list-item:nth-child(4):last-child) .list-item-content__description p {
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.6;
}
@media (max-width: 1199px) {
  .user-items-list-simple:has(> .list-item:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  .user-items-list-simple:has(> .list-item:nth-child(4):last-child) {
    grid-template-columns: 1fr !important;
    row-gap: 40px !important;
  }
}

/* Testimonials: one quote in view (the next one no longer peeks in), centred,
   with lighter arrows sitting just under it. */
.user-items-list-carousel__slides-revealer { overflow: hidden; }
.user-items-list-carousel__slide .list-item-content {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
.user-items-list-carousel__slide .list-item-content__title {
  text-wrap: balance;
}
.user-items-list-carousel .desktop-arrows .arrows-bottom {
  margin: 8px auto 0 !important;
  justify-self: center;
}
.user-items-list-carousel .desktop-arrows.arrows-bottom-wrapper {
  justify-content: center !important;
}
.user-items-list-carousel__arrow-button {
  width: 48px !important;
  height: 48px !important;
}
.user-items-list-carousel__arrow-button { overflow: visible !important; position: relative; }
.user-items-list-carousel__arrow-icon-background {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  box-sizing: border-box;
  background: transparent !important;
  border: 1px solid rgb(23, 48, 104);
  border-radius: 50%;
  transition: background-color 0.25s ease;
}
.user-items-list-carousel__arrow-button:hover .user-items-list-carousel__arrow-icon-background {
  background: rgb(23, 48, 104) !important;
}
.user-items-list-carousel__arrow-icon-path { stroke: rgb(23, 48, 104) !important; transition: stroke 0.25s ease; }
.user-items-list-carousel__arrow-button:hover .user-items-list-carousel__arrow-icon-path { stroke: #fff !important; }

/* Testimonial text centred under the centred block. */
.user-items-list-carousel__slide .list-item-content__title,
.user-items-list-carousel__slide .list-item-content__description {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Contact: on wider screens SEND sits on the same row as the "Yes" pill,
   bottoms aligned (button 55px + the 20px field gap = 75px lift). */
@media (min-width: 768px) {
  form.react-form-contents .form-button-wrapper {
    margin-top: -75px !important;
    position: relative;
    z-index: 1;
    pointer-events: none;
  }
  form.react-form-contents .form-button-wrapper button { pointer-events: auto; }
}

/* Contact: social icons a size up. */
.sqs-block-socialaccountlinks-content .sqs-svg-icon--wrapper {
  width: 44px !important;
  height: 44px !important;
}
.sqs-block-socialaccountlinks-content .sqs-svg-icon--wrapper svg {
  width: 100% !important;
  height: 100% !important;
}

/* Hide-on-scroll header (toggled in site.js). */
#header {
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}
#header.sp-header-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  #header { transition: none; }
}

.sqs-block-accordion .accordion-item__dropdown {
  transition: height 0.3s ease;
}

/* Contact details read as the original plain text, with a hint on hover. */
a.sp-contact-link {
  color: inherit;
  text-decoration: none;
}
a.sp-contact-link:hover,
a.sp-contact-link:focus-visible {
  text-decoration: underline;
}

/* Matches Squarespace's form error banner (#d0312d with white text). */
.sp-error {
  background: #d0312d;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.6em 0.9em;
  margin: 0 0 1em;
}
.sp-error p {
  margin: 0;
  color: inherit;
}
form.react-form-contents [aria-invalid="true"] {
  border-bottom-color: #d0312d !important;
}
/* SEND sits on the right of the form. */
form.react-form-contents .form-button-wrapper {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

form.react-form-contents [type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
}

.sp-thanks {
  padding: 2em 0;
  font-size: 1.1rem;
}