/*
  Upwind Consulting: single-page site
  Design tokens replicated 1:1 from https://fundx.vc (Webflow export):
    type    Montserrat · body 16/28 · h1 44/62 · h2 36/50 · h3 30/46 · jumbo 64/80
    ink     #1a1b1f (hover #32343a · active #43464d) · muted text via opacity .6
    surface #f4f4f4 · borders #e2e2e2 / #e4e4e4 · success #12b878 · error #db4b68
    layout  1140px container · 30px section gutters · 30px grid gaps
    breaks  991px · 767px · 479px
*/

/* ============================== Base ============================== */

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: #1a1b1f;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

main, nav, header, footer, section {
  display: block;
}

b, strong {
  font-weight: bold;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  display: block;
}

button, input, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button, input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* ============================== Typography ============================== */

h1 {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 44px;
  font-weight: 400;
  line-height: 62px;
}

h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
}

h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 400;
  line-height: 46px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

a {
  background-color: rgba(0, 0, 0, 0);
  color: #1a1b1f;
  text-decoration: underline;
  transition: opacity .2s;
  display: block;
}

a:hover {
  color: #32343a;
}

a:active {
  color: #43464d;
}

ul {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 40px;
  list-style-type: disc;
}

li {
  margin-bottom: 10px;
}

label {
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  display: block;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 25px 0;
  padding: 15px 30px;
  font-size: 20px;
  line-height: 34px;
}

.quote-cite {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-style: normal;
  opacity: .6;
}

.heading-jumbo {
  text-transform: none;
  margin: 20px 0 10px;
  font-size: 64px;
  line-height: 80px;
}

.paragraph-light {
  opacity: .6;
  text-align: left;
}

.paragraph-light.cc-position-name {
  margin-bottom: 5px;
  padding-top: 15px;
}

.paragraph-tiny {
  font-size: 12px;
  line-height: 20px;
}

.paragraph-tiny.cc-paragraph-tiny-light {
  opacity: .7;
}

/* ============================== Shared layout ============================== */

.section {
  margin-left: 30px;
  margin-right: 30px;
}

.section.cc-contact {
  background-color: #f4f4f4;
  padding-left: 80px;
  padding-right: 80px;
}

.aboutuscontainer {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.button {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #1a1b1f;
  border: 0;
  border-radius: 0;
  padding: 12px 25px;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  display: inline-block;
  transition: background-color .4s, opacity .4s, color .4s;
}

.button:hover {
  color: #fff;
  background-color: #32343a;
}

.button:active {
  background-color: #43464d;
}

/* ============================== Navigation ============================== */

.navigation {
  z-index: 1000;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  align-items: center;
  padding: 16px 50px;
  display: flex;
  position: sticky;
  top: 0;
}

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

.logo-link {
  z-index: 1;
  text-decoration: none;
  position: relative;
}

.logo-link:hover {
  color: #1a1b1f;
  opacity: .8;
}

.logo-link:active {
  color: #1a1b1f;
  opacity: .7;
}

.logo-text {
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: .5px;
}

.logo-img {
  width: auto;
  height: 34px;
}

.navigation-wrap {
  align-items: center;
  margin-right: -20px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.navigation-item {
  opacity: .6;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.navigation-item:hover {
  opacity: .9;
}

.navigation-item:active {
  opacity: .8;
}

.navigation-item.w--current {
  opacity: 1;
  color: #1a1b1f;
  font-weight: 600;
}

.navigation-item.w--current:hover {
  opacity: .8;
  color: #32343a;
}

.navigation-item.w--current:active {
  opacity: .7;
  color: #32343a;
}

.menu-button {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  padding: 18px;
  font-size: 24px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  display: none;
}

.menu-icon {
  display: block;
}

/* ============================== Hero ============================== */

.section-2 {
  margin-left: 30px;
  margin-right: 30px;
}

.div-block {
  margin: 40px 30px;
}

/* ============================== Intro blocks (story / approach) ============================== */

.works-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  grid-auto-columns: 1fr;
  margin-bottom: 80px;
  display: grid;
}

.works-grid .cc-story {
  grid-area: 1 / 1 / 2 / 3;
}

.works-grid .cc-approach {
  grid-area: 1 / 3 / 2 / 4;
}

.work-image {
  text-align: center;
  background-color: #f4f4f4;
  background-position: 50%;
  background-size: cover;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  height: 460px;
  margin-bottom: 40px;
  text-decoration: none;
  display: flex;
}

.work-image:hover {
  opacity: .8;
}

.work-image:active {
  opacity: .7;
}

.work-image.cc-work-1 {
  background-image: url("assets/0190531_campus_queens_tower_014-(1).webp");
  background-size: cover;
}

.work-image.cc-work-2 {
  background-image: url("assets/approach.jpeg");
  background-size: cover;
}

.work-description {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 60px;
  display: flex;
}

.project-name-link {
  text-align: center;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 400;
  line-height: 34px;
  text-decoration: none;
}

.project-name-link:hover {
  opacity: .8;
}

.project-name-link:active {
  opacity: .7;
}

/* ============================== About us / Selected work ============================== */

.carrer-headline-wrap {
  width: 70%;
  margin-bottom: 50px;
}

.work-experience-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  margin-bottom: 140px;
  display: grid;
}

.work-experience-grid.teamgrid {
  grid-template-columns: 1fr 1fr;
}

.work-experience-grid.portfoliogrid {
  grid-template-columns: 2fr 2fr 2fr;
}

.team-photo {
  width: 80%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  margin-bottom: 25px;
}

.position-name-text {
  text-transform: none;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 400;
  line-height: 34px;
}

.portfolioname {
  font-size: 40px;
  font-weight: 800;
  line-height: 30px;
  text-decoration: none;
}

/* ============================== Contact ============================== */

.headingcontact {
  padding-top: 20px;
}

.contact {
  padding-top: 16px;
  padding-bottom: 90px;
}

.contact-headline {
  width: 70%;
  margin-bottom: 40px;
}

.cc-contact-intro {
  color: #5a5d64;
}

.contact-form-wrap {
  width: 70%;
}

.form-block {
  margin: 0 0 15px;
}

.contact-form-grid {
  grid-column-gap: 30px;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.contact-form-grid .cc-field-message {
  grid-column: 1 / 3;
}

.text-field {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 0;
  width: 100%;
  height: 38px;
  margin-bottom: 18px;
  padding: 21px 20px;
  font-size: 14px;
  line-height: 26px;
  display: block;
  transition: border-color .4s;
}

.text-field:hover {
  border-color: #e3e6eb;
}

.text-field:active,
.text-field:focus {
  border-color: #43464d;
  outline: 0;
}

.text-field::placeholder {
  color: rgba(50, 52, 58, .4);
}

.text-field.cc-textarea {
  height: 200px;
  padding-top: 12px;
}

.status-message {
  color: #fff;
  text-align: center;
  padding: 9px 30px;
  font-size: 14px;
  line-height: 26px;
}

/* Success confirmation: a calm card that matches the site's minimal, square aesthetic. */
.status-message.cc-success-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #1a1b1f;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  padding: 56px 40px;
  animation: cc-success-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

.cc-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  color: #12b878;
  background-color: rgba(18, 184, 120, .12);
  border-radius: 50%;
  animation: cc-success-pop .45s cubic-bezier(.34, 1.56, .64, 1) .12s both;
}

.cc-success-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -.2px;
}

.cc-success-text {
  max-width: 340px;
  margin-top: 8px;
  color: rgba(50, 52, 58, .6);
  font-size: 15px;
  line-height: 24px;
}

@keyframes cc-success-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cc-success-pop {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .status-message.cc-success-message,
  .cc-success-icon {
    animation: none;
  }
}

.status-message.cc-error-message {
  background-color: #db4b68;
  margin-top: 10px;
}

/* ============================== How we work ============================== */

.section.cc-process,
.section.cc-capabilities,
.section.cc-casestudy {
  margin-bottom: 40px;
}

.section.cc-process {
  margin-top: -40px;
}

.section.cc-casestudy {
  margin-top: -50px;
}

.process-grid {
  grid-column-gap: 30px;
  grid-row-gap: 40px;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 50px;
  padding: 0;
  list-style: none;
  display: grid;
}

.process-step {
  border-top: 2px solid #1a1b1f;
  padding-top: 20px;
  margin: 0;
}

.process-num {
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  color: #fff;
  background-color: #1a1b1f;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
}

.process-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
}

.process-step .paragraph-light {
  font-size: 15px;
  line-height: 24px;
}

.process-note {
  grid-column-gap: 30px;
  background-color: #f4f4f4;
  align-items: baseline;
  padding: 30px;
  display: flex;
}

.process-note-label {
  flex: 0 0 220px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.process-note .paragraph-light {
  margin: 0;
}

/* ============================== What we can do ============================== */

.capability-grid {
  grid-column-gap: 60px;
  grid-row-gap: 45px;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.capability {
  border-top: 1px solid #e4e4e4;
  padding-top: 24px;
  flex-direction: column;
  display: flex;
}

.capability-title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.capability .paragraph-light {
  margin-bottom: 18px;
}

.tag-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  margin-top: auto;
  padding: 0;
  list-style: none;
  display: flex;
}

.tag-list li {
  color: rgba(26, 27, 31, .75);
  letter-spacing: .5px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  margin: 0;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 20px;
}

/* ============================== Case study ============================== */

.stat-row {
  grid-column-gap: 30px;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid #1a1b1f;
  margin-bottom: 50px;
  padding-top: 28px;
  display: grid;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
}

.stat-label {
  opacity: .6;
  margin-top: 4px;
  font-size: 14px;
  line-height: 22px;
}

.phase-grid {
  grid-column-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  margin-bottom: 40px;
  display: grid;
}

.phase {
  grid-template-rows: subgrid;
  grid-row: 1 / span 4;
  grid-row-gap: 14px;
  background-color: #f4f4f4;
  padding: 30px;
  display: grid;
}

.phase:first-child {
  grid-column: 1;
}

.phase:last-child {
  grid-column: 2;
}

.phase-label {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.phase-point {
  opacity: .75;
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 24px;
  position: relative;
}

.phase-point::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: currentColor;
  border-radius: 50%;
}

.casestudy-note {
  opacity: .5;
  margin-top: 24px;
}

@media (max-width: 991px) {
  .process-grid,
  .stat-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .process-grid,
  .capability-grid,
  .phase-grid,
  .stat-row {
    grid-template-columns: 1fr;
  }

  /* Tighten the gap between each process step and the line above it. */
  .process-grid {
    grid-row-gap: 10px;
  }

  /* A little breathing room between the stacked stats. */
  .stat-row {
    grid-row-gap: 24px;
  }

  /* Stack Phase 1 and Phase 2 instead of the two-column subgrid. */
  .phase-grid {
    grid-template-rows: none;
    grid-row-gap: 20px;
  }

  .phase,
  .phase:first-child,
  .phase:last-child {
    grid-row: auto;
    grid-column: auto;
    grid-template-rows: none;
  }

  .process-note {
    flex-direction: column;
    grid-row-gap: 12px;
  }

  .process-note-label {
    flex-basis: auto;
  }
}

/* ============================== Footer ============================== */

.footer-wrap {
  justify-content: space-between;
  align-items: center;
  padding: 40px 50px;
  display: flex;
}

.footer-brand {
  opacity: .5;
  text-transform: uppercase;
  align-items: center;
  display: flex;
}

/* ============================== Tablet (≤991px) ============================== */

@media screen and (max-width: 991px) {
  .heading-jumbo {
    font-size: 56px;
    line-height: 70px;
  }

  .section.cc-contact {
    padding-left: 0;
    padding-right: 0;
  }

  .navigation {
    padding: 25px 30px;
  }

  .navigation-wrap {
    margin-right: 0;
  }

  .menu-button {
    display: block;
    padding: 0;
  }

  .nav-menu {
    text-align: center;
    background-color: #fff;
    min-width: 200px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }

  .nav-menu.is-open {
    display: block;
    animation: nav-reveal .4s ease;
  }

  .navigation-item {
    text-align: center;
    padding: 15px 30px;
    display: block;
    transition: background-color .4s, opacity .4s, color .4s;
  }

  .navigation-item:hover {
    background-color: #f7f8f9;
  }

  .navigation-item:active {
    background-color: #eef0f3;
  }

  .works-grid {
    flex-direction: column;
    align-items: stretch;
    display: flex;
  }

  .carrer-headline-wrap {
    width: auto;
  }

  .work-image {
    margin-bottom: 30px;
  }

  .work-experience-grid.portfoliogrid {
    grid-template-columns: 1fr 1fr;
  }

  .contact {
    width: auto;
    padding: 30px 50px 40px;
  }

  .contact-headline,
  .contact-form-wrap {
    width: 100%;
  }
}

@keyframes nav-reveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================== Mobile landscape (≤767px) ============================== */

@media screen and (max-width: 767px) {
  .aboutuscontainer {
    text-align: center;
  }

  .heading-jumbo {
    font-size: 50px;
    line-height: 64px;
  }

  .section {
    margin-left: 15px;
    margin-right: 15px;
  }

  .section.cc-contact {
    padding: 15px;
  }

  .logo-link {
    padding-left: 0;
  }

  .navigation {
    padding: 20px 30px;
  }

  /* Halve the height of the story / approach images on mobile. */
  .work-image {
    height: 230px;
  }

  /* Use the portrait-friendly approach photo on mobile. */
  .work-image.cc-work-2 {
    background-image: url("assets/approach2.jpeg");
  }

  /* Less space between the story text and the approach photo below it. */
  .work-description {
    margin-bottom: 12px;
  }

  .work-experience-grid {
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .work-position-wrap {
    width: 100%;
    margin-bottom: 40px;
  }

  /* Less gap between the team grid and the case study below it. */
  .work-experience-grid {
    margin-bottom: 30px;
  }

  /* Center the team photos so they line up with the centered name / title. */
  .team-photo {
    margin-left: auto;
    margin-right: auto;
  }

  .cc-about {
    padding-left: 24px;
    padding-right: 24px;
  }

  .paragraph-light.cc-position-name {
    text-align: center;
    padding-top: 2px;
  }

  .position-name-text {
    margin-bottom: 4px;
  }

  .headingcontact {
    font-size: 32px;
    line-height: 42px;
  }

  .cc-contact-intro {
    font-size: 20px;
    line-height: 30px;
  }

  .project-name-link {
    font-size: 16px;
    line-height: 28px;
  }

  .text-field.cc-textarea {
    text-align: left;
  }

  .contact {
    padding-left: 30px;
    padding-right: 30px;
  }

  .contact-form-grid {
    grid-column-gap: 30px;
    grid-template-columns: 1fr;
  }

  .contact-form-grid .cc-field-message {
    grid-column: auto;
  }

  .contact-form {
    flex-direction: column;
    display: flex;
  }

  .contact-form-wrap {
    text-align: left;
  }

  .footer-wrap {
    text-align: center;
    flex-direction: column;
  }

  .footer-brand {
    margin-bottom: 15px;
  }
}

/* ============================== Mobile portrait (≤479px) ============================== */

@media screen and (max-width: 479px) {
  .heading-jumbo {
    font-size: 36px;
    line-height: 48px;
  }

  .paragraph-light {
    margin-bottom: 40px;
  }

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

  .menu-button {
    flex: none;
  }

  .contact {
    padding-left: 15px;
    padding-right: 15px;
  }

  .contact-form,
  .contact-form-wrap,
  .footer-wrap {
    flex-direction: column;
  }
}

/* ============================== Motion preferences ============================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nav-menu.is-open {
    animation: none;
  }
}