:root {
  --ink: #1e2a3a;
  --muted: #667085;
  --line: #dbe4ee;
  --soft: #f7fbff;

  --blue: #0b73d9;
  --blue-dark: #075bb0;
  --purple: #6a4bc4;
  --green: #1f9d72;

  --white: #ffffff;

  --brand-navy: #03102d;
  --brand-blue: #103b68;
  --brand-indigo: #3b3475;

  --shadow: 0 18px 55px rgba(28, 54, 86, .10);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color: var(--ink);
  background: var(--white);

  line-height: 1.6;
}


a {
  color: inherit;
}


.wrap {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}


.narrow {
  width: min(760px, calc(100% - 40px));
}


/* ------------------------------------------------
   PINNED VINEFLOW BRAND
------------------------------------------------ */

.sticky-brand {
  position: sticky;
  top: 0;
  z-index: 1000;

  padding: 12px 0;

  background: rgba(255, 255, 255, .96);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(219, 228, 238, .90);
}


.sticky-brand-inner {
  position: relative;

  width: min(1160px, calc(100% - 40px));
  min-height: 164px;

  margin: 0 auto;
  padding: 14px 110px 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 75% 100%,
      rgba(82, 123, 176, .32),
      transparent 44%
    ),
    linear-gradient(
      105deg,
      var(--brand-navy) 0%,
      #092a51 50%,
      var(--brand-blue) 72%,
      var(--brand-indigo) 100%
    );

  box-shadow:
    0 14px 38px rgba(12, 42, 78, .18);

  overflow: hidden;
}


.brand-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}


.brand-logo {
  display: block;

  width: 335px;
  max-width: min(52vw, 335px);
  height: auto;

  margin: 0 auto;
}


/*
  Tagline is HTML rather than an image.
  That keeps every word bright and readable.
*/

.brand-tagline {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  margin-top: 1px;

  font-size: .78rem;
  font-weight: 800;

  letter-spacing: .22em;

  white-space: nowrap;

  text-shadow:
    0 0 12px rgba(65, 200, 255, .18);
}


.tag-connect {
  color: #29e6f2;
}


.tag-abide {
  color: #57adff;
}


.tag-grow {
  color: #c47aff;
}


.tag-divider {
  color: #70b8ed;
  opacity: .9;
}


.sticky-contact {
  position: absolute;

  right: 28px;
  top: 50%;

  transform: translateY(-50%);

  padding: 10px 17px;

  border-radius: 999px;

  background: rgba(255, 255, 255, .97);

  border: 1px solid rgba(255, 255, 255, .85);

  color: #153452;

  font-size: .92rem;
  font-weight: 750;

  text-decoration: none;

  box-shadow:
    0 7px 18px rgba(1, 12, 35, .16);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.sticky-contact:hover {
  transform: translateY(-52%);

  box-shadow:
    0 10px 24px rgba(1, 12, 35, .22);
}


/* ------------------------------------------------
   SCROLLING INTRO
------------------------------------------------ */

.intro {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(18, 180, 224, .13),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 18%,
      rgba(106, 75, 196, .12),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f9fcff 100%
    );

  border-bottom: 1px solid var(--line);
}


.intro-inner {
  text-align: center;

  padding:
    58px 0
    70px;
}


.intro h1 {
  max-width: 940px;

  margin:
    0 auto
    22px;

  font-size:
    clamp(
      2.25rem,
      5vw,
      4.4rem
    );

  line-height: 1.08;

  letter-spacing: -.035em;
}


.intro-copy {
  max-width: 760px;

  margin: 0 auto;

  font-size:
    clamp(
      1.08rem,
      2vw,
      1.3rem
    );

  color: var(--muted);
}


.intro-actions {
  display: flex;

  justify-content: center;

  margin:
    32px 0
    27px;
}


.eyebrow {
  margin: 0;

  color: #5d6b7d;

  font-size: .95rem;

  font-weight: 650;
}


/* ------------------------------------------------
   BUTTONS
------------------------------------------------ */

.button {
  display: inline-block;

  padding:
    13px
    19px;

  border-radius: 12px;

  text-decoration: none;

  font-weight: 750;

  transition: .18s ease;
}


.button.primary {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--purple)
    );

  box-shadow:
    0 10px 24px rgba(11, 115, 217, .18);
}


.button.primary:hover {
  transform: translateY(-1px);

  box-shadow:
    0 14px 30px rgba(11, 115, 217, .24);
}


/* ------------------------------------------------
   PAGE SECTIONS
------------------------------------------------ */

.section {
  padding:
    84px 0;
}


.section.soft {
  background: var(--soft);

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}


.section-kicker {
  margin:
    0 0
    8px;

  color: var(--blue);

  font-size: .82rem;

  font-weight: 800;

  letter-spacing: .06em;

  text-transform: uppercase;
}


h2 {
  margin:
    0 0
    22px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.15rem
    );

  line-height: 1.12;

  letter-spacing: -.025em;
}


h3 {
  margin:
    0 0
    8px;

  font-size: 1.25rem;
}


p {
  font-size: 1.05rem;
}


.lead {
  font-size: 1.22rem;
}


/* ------------------------------------------------
   CONNECT
------------------------------------------------ */

.two-col {
  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

  gap: 42px;

  align-items: start;
}


.feature-card,
.card,
.emphasis-box {
  background: white;

  border:
    1px solid
    var(--line);

  border-radius: 20px;

  box-shadow:
    0 14px 40px
    rgba(28, 54, 86, .08);
}


.feature-card {
  padding:
    28px
    30px;
}


.feature-card ul {
  margin: 0;

  padding-left: 1.25rem;
}


.feature-card li {
  margin:
    9px 0;
}


.emphasis-box {
  margin-top: 38px;

  padding:
    24px
    30px;

  text-align: center;
}


.emphasis-box p {
  margin: 0;

  font-size: 1.2rem;

  font-weight: 750;
}


/* ------------------------------------------------
   CARDS
------------------------------------------------ */

.cards {
  display: grid;

  gap: 22px;

  margin-top: 34px;
}


.cards.three {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}


.cards.two {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}


.card {
  padding: 26px;
}


.card p {
  margin-bottom: 0;

  color: var(--muted);
}


.suite-card {
  display: flex;

  flex-direction: column;

  min-height: 195px;
}


.suite-card p {
  flex: 1;
}


.status {
  align-self: flex-start;

  margin-top: 20px;

  padding:
    5px
    10px;

  border-radius: 999px;

  font-size: .78rem;

  font-weight: 750;

  letter-spacing: .02em;
}


.status.available {
  color: #075bb0;

  background: #e8f4ff;
}


.status.development {
  color: #6550a9;

  background: #f0ebff;
}


.suite-note {
  max-width: 840px;

  margin:
    34px auto
    0;

  text-align: center;

  font-size: 1.14rem;
}


.availability {
  max-width: 760px;

  margin:
    16px auto
    0;

  text-align: center;

  color: var(--muted);
}


/* ------------------------------------------------
   CONTACT SECTION
------------------------------------------------ */

.contact {
  text-align: center;
}


.contact .button {
  margin-top: 18px;
}


.contact-email {
  margin-top: 18px;
}


.contact-email a {
  color: var(--blue);

  font-weight: 700;

  text-decoration: none;
}


/* ------------------------------------------------
   FOOTER
------------------------------------------------ */

footer {
  padding:
    48px 0;

  background: #152131;

  color: #dbe6f1;
}


.footer-wrap {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 36px;
}


.footer-brand {
  margin: 0;

  color: white;

  font-size: 1.35rem;

  font-weight: 800;
}


footer p {
  margin:
    8px 0
    0;

  color: #b9c8d8;

  font-size: .95rem;
}


.footer-links {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;

  font-size: .92rem;
}


.footer-links a {
  color: #e8f2fc;

  text-decoration: none;
}


.footer-links a:hover {
  text-decoration: underline;
}


/* ------------------------------------------------
   TABLET
------------------------------------------------ */

@media (max-width: 820px) {

  .sticky-brand-inner {
    min-height: 150px;

    padding:
      12px 92px
      12px 18px;
  }


  .brand-logo {
    width: 290px;

    max-width: 48vw;
  }


  .brand-tagline {
    gap: 10px;

    font-size: .68rem;

    letter-spacing: .16em;
  }


  .sticky-contact {
    right: 18px;

    padding:
      9px
      14px;

    font-size: .86rem;
  }


  .two-col {
    grid-template-columns: 1fr;
  }


  .cards.three {
    grid-template-columns: 1fr;
  }


  .intro-inner {
    padding:
      50px 0
      60px;
  }


  .section {
    padding:
      66px 0;
  }


  .footer-wrap {
    flex-direction: column;
  }


  .footer-links {
    align-items: flex-start;
  }

}


/* ------------------------------------------------
   SMALL SCREENS
------------------------------------------------ */

@media (max-width: 680px) {

  .cards.two {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 520px) {

  .wrap,
  .narrow {
    width:
      min(
        100% - 28px,
        1160px
      );
  }


  .sticky-brand {
    padding:
      8px 0;
  }


  .sticky-brand-inner {
    width:
      calc(100% - 16px);

    min-height: 132px;

    padding:
      12px 72px
      12px 12px;

    border-radius: 22px;
  }


  .brand-logo {
    width: 230px;

    max-width: 58vw;
  }


  .brand-tagline {
    gap: 7px;

    font-size: .56rem;

    letter-spacing: .11em;
  }


  .sticky-contact {
    right: 10px;

    padding:
      8px
      11px;

    font-size: .76rem;
  }


  .hero-inner {
    padding:
      32px 0
      46px !important;
  }


  .hero h1 {
    font-size: 1.7rem !important;
    line-height: 1.08;
  }


  .hero-copy {
    font-size: .98rem !important;
    line-height: 1.5;
  }


  .button {
    width: 100%;

    text-align: center;
  }

}