/* =========================================================
   VELOURA WORK WITH US
   ORIGINAL VELOURA PALETTE
========================================================= */

:root {
  --cream: #fffaf8;
  --soft: #fff3f6;
  --pink: #e8699b;
  --pink-dark: #c84e7e;
  --gold: #c28a2e;
  --gold-light: #f2c96c;
  --brown: #33201a;
  --muted: #8d635b;
  --line: rgba(194, 138, 46, .16);
  --shadow: 0 24px 70px rgba(65, 36, 30, .10);
  --font-body: "Montserrat", sans-serif;
  --font-display: "Cormorant Garamond", serif;
}


/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;

  font-family:
    var(--font-body);

  background:
    var(--cream);

  color:
    var(--brown);

  font-size: 15px;

  line-height: 1.55;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
a {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}


/* =========================================================
   PAGE
========================================================= */

.work-page {
  position: relative;

  width: 100%;

  min-height: 100vh;
  min-height: 100svh;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      var(--cream) 0%,
      #fff 43%,
      var(--soft) 100%
    );
}


/* =========================================================
   DECORATION
========================================================= */

.work-page::before {
  content: "";

  position: fixed;

  width: 500px;
  height: 500px;

  top: -260px;
  right: -180px;

  border-radius: 50%;

  background:
    rgba(242, 201, 108, .13);

  filter:
    blur(30px);

  pointer-events: none;
}

.work-page::after {
  content: "";

  position: fixed;

  width: 500px;
  height: 500px;

  bottom: -280px;
  left: -180px;

  border-radius: 50%;

  background:
    rgba(232, 105, 155, .08);

  filter:
    blur(30px);

  pointer-events: none;
}

.glow {
  position: fixed;

  border-radius: 50%;

  pointer-events: none;
}

.glow-one {
  width: 720px;
  height: 720px;

  top: 170px;
  left: 50%;

  transform:
    translateX(-50%);

  border:
    1px solid
    rgba(194, 138, 46, .06);

  animation:
    workCircle
    14s
    ease-in-out
    infinite;
}

.glow-two {
  display: none;
}


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

.work-header {
  position: relative;

  z-index: 5;

  min-height: 90px;

  padding:
    18px
    clamp(22px, 5vw, 72px);

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  background:
    rgba(255, 250, 248, .90);

  backdrop-filter:
    blur(16px);

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

  border-bottom:
    1px solid
    rgba(194, 138, 46, .08);
}

.work-logo {
  width: 200px;

  max-width: 46vw;

  display: block;
}

.back-link {
  min-height: 42px;

  padding:
    0
    18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

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

  border-radius:
    999px;

  background:
    #fff;

  color:
    var(--gold);

  text-decoration: none;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.3px;

  text-transform:
    uppercase;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.back-link:hover {
  transform:
    translateY(-2px);

  background:
    var(--gold);

  color:
    #fff;

  box-shadow:
    0 12px 28px
    rgba(194, 138, 46, .16);
}


/* =========================================================
   INTRO
========================================================= */

.work-intro {
  position: relative;

  z-index: 2;

  width:
    min(
      760px,
      calc(100% - 40px)
    );

  margin:
    0
    auto;

  padding:
    68px
    20px
    38px;

  text-align:
    center;

  animation:
    workReveal
    .75s
    ease
    both;
}

.work-eyebrow {
  margin-bottom:
    11px;

  color:
    var(--gold);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    3.2px;

  text-transform:
    uppercase;
}

.work-intro h1 {
  font-family:
    var(--font-display);

  color:
    var(--brown);

  font-size:
    clamp(
      48px,
      6.5vw,
      70px
    );

  font-weight:
    600;

  line-height:
    .98;
}

.work-intro h1 span {
  display:
    block;

  color:
    var(--pink);
}

.intro-line {
  width:
    68px;

  height:
    2px;

  margin:
    21px
    auto;

  background:
    var(--gold);
}

.work-intro p {
  max-width:
    620px;

  margin:
    0
    auto;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.8;
}


/* =========================================================
   APPLICATION TYPE SECTION
========================================================= */

.application-type-section {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      760px,
      calc(100% - 40px)
    );

  margin:
    0
    auto
    80px;

  animation:
    workReveal
    .75s
    .1s
    ease
    both;
}

.application-type-heading {
  margin-bottom:
    24px;

  text-align:
    center;
}

.type-eyebrow {
  margin-bottom:
    7px;

  color:
    var(--gold);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    2.6px;

  text-transform:
    uppercase;
}

.application-type-heading h2 {
  font-family:
    var(--font-display);

  color:
    var(--brown);

  font-size:
    clamp(
      29px,
      3.5vw,
      39px
    );

  font-weight:
    600;
}


/* =========================================================
   SMALLER APPLICATION IMAGE CARDS
========================================================= */

.application-type-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 20px;
}

.application-type-card {
  position: relative;

  width: 100%;

  max-width: 360px;

  justify-self: center;

  overflow: hidden;

  padding: 0;

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

  border-radius:
    24px;

  background:
    #fff;

  color:
    var(--brown);

  text-align:
    left;

  box-shadow:
    0 14px 38px
    rgba(65, 36, 30, .07);

  cursor: pointer;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.application-type-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(194, 138, 46, .30);

  box-shadow:
    0 22px 52px
    rgba(65, 36, 30, .11);
}


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

.type-image-wrap {
  position: relative;

  width: 100%;

  aspect-ratio:
    4 / 4.3;

  overflow: hidden;

  background:
    var(--soft);
}

.type-image {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

  transition:
    transform .55s ease;
}

.application-type-card:hover
.type-image {
  transform:
    scale(1.035);
}

.type-image-overlay {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 250, 248, 0) 52%,
      rgba(51, 32, 26, .07) 100%
    );
}


/* =========================================================
   SMALLER CARD BODY
========================================================= */

.type-card-body {
  padding:
    20px
    20px
    22px;

  text-align:
    center;
}

.type-card-eyebrow {
  margin-bottom:
    6px;

  color:
    var(--gold);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    2.4px;

  text-transform:
    uppercase;
}

.type-card-body strong {
  display:
    block;

  font-family:
    var(--font-display);

  color:
    var(--brown);

  font-size:
    30px;

  font-weight:
    600;

  line-height:
    1;
}

.type-card-body small {
  display:
    block;

  max-width:
    230px;

  margin:
    10px
    auto
    15px;

  color:
    var(--muted);

  font-size:
    10.5px;

  line-height:
    1.55;
}

.type-card-link {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(--pink);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1.6px;

  text-transform:
    uppercase;

  transition:
    color .25s ease,
    gap .25s ease;
}

.application-type-card:hover
.type-card-link {
  color:
    var(--pink-dark);

  gap:
    12px;
}


/* =========================================================
   APPLICATION WRAPPER
========================================================= */

.application-wrapper {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      860px,
      calc(100% - 40px)
    );

  margin:
    0
    auto
    80px;

  scroll-margin-top:
    110px;
}


/* =========================================================
   FORM CARD
========================================================= */

.application-card {
  position:
    relative;

  overflow:
    hidden;

  padding:
    clamp(
      32px,
      5vw,
      54px
    );

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

  border-radius:
    30px;

  background:
    #fff;

  box-shadow:
    var(--shadow);

  animation:
    formReveal
    .55s
    ease
    both;
}

.application-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    50%;

  width:
    72px;

  height:
    2px;

  transform:
    translateX(-50%);

  background:
    var(--gold);
}


/* =========================================================
   SELECTED FORM HEADER
========================================================= */

.selected-application-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  margin-bottom:
    8px;
}

.selected-eyebrow {
  margin-bottom:
    6px;

  color:
    var(--gold);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    2.6px;

  text-transform:
    uppercase;
}

.selected-application-header h2 {
  font-family:
    var(--font-display);

  color:
    var(--brown);

  font-size:
    clamp(
      35px,
      5vw,
      46px
    );

  font-weight:
    600;

  line-height:
    1;
}

.change-application-btn {
  min-height:
    38px;

  padding:
    0
    15px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  flex-shrink:
    0;

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

  border-radius:
    999px;

  background:
    var(--cream);

  color:
    var(--gold);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.change-application-btn:hover {
  transform:
    translateY(-2px);

  background:
    var(--gold);

  color:
    #fff;
}

.form-intro {
  margin:
    12px
    0
    30px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.7;
}


/* =========================================================
   FORM GRID
========================================================= */

.form-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    20px;
}

label {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  color:
    var(--brown);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;
}

.full {
  grid-column:
    1 / -1;
}


/* =========================================================
   FORM FIELDS
========================================================= */

input,
select,
textarea {
  width:
    100%;

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

  border-radius:
    18px;

  outline:
    0;

  background:
    var(--cream);

  color:
    var(--brown);

  padding:
    13px
    15px;

  font-size:
    12px;

  font-weight:
    400;

  text-transform:
    none;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

input,
select {
  min-height:
    49px;
}

textarea {
  min-height:
    120px;

  resize:
    vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color:
    rgba(194, 138, 46, .33);
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--gold);

  background:
    #fff;

  box-shadow:
    0 0 0 3px
    rgba(194, 138, 46, .08);
}

input::placeholder,
textarea::placeholder {
  color:
    rgba(141, 99, 91, .65);
}

select {
  cursor:
    pointer;
}


/* =========================================================
   SUBMIT
========================================================= */

.submit-btn {
  position:
    relative;

  width:
    100%;

  height:
    52px;

  margin-top:
    29px;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--pink);

  color:
    #fff;

  text-transform:
    uppercase;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    2px;

  cursor:
    pointer;

  box-shadow:
    0 14px 28px
    rgba(232, 105, 155, .20);

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

.submit-btn::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    -120%;

  width:
    55%;

  height:
    100%;

  transform:
    skewX(-25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .34),
      transparent
    );

  transition:
    left
    .65s
    ease;
}

.submit-btn:hover::before {
  left:
    145%;
}

.submit-btn:hover {
  transform:
    translateY(-3px);

  background:
    var(--pink-dark);

  box-shadow:
    0 18px 36px
    rgba(200, 78, 126, .24);
}

.submit-btn:disabled {
  opacity:
    .6;

  cursor:
    not-allowed;

  transform:
    none;

  box-shadow:
    none;
}


/* =========================================================
   STATUS
========================================================= */

.form-message {
  min-height:
    20px;

  margin-top:
    14px;

  color:
    var(--pink-dark);

  font-size:
    11px;

  text-align:
    center;
}


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

.work-footer {
  position:
    relative;

  z-index:
    2;

  padding:
    24px;

  border-top:
    1px solid
    rgba(194, 138, 46, .09);

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

  color:
    var(--muted);

  text-align:
    center;

  font-size:
    10px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes workReveal {

  from {
    opacity:
      0;

    transform:
      translateY(20px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }

}

@keyframes formReveal {

  from {
    opacity:
      0;

    transform:
      translateY(20px)
      scale(.99);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

}

@keyframes workCircle {

  0%,
  100% {
    transform:
      translateX(-50%)
      scale(1);
  }

  50% {
    transform:
      translateX(-50%)
      scale(1.035);
  }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width: 768px) {

  .work-header {
    min-height:
      74px;

    padding:
      14px
      16px;
  }

  .work-logo {
    width:
      160px;
  }

  .back-link {
    width:
      40px;

    height:
      40px;

    min-height:
      40px;

    padding:
      0;
  }

  .back-link span {
    display:
      none;
  }

  .work-intro {
    padding:
      52px
      10px
      34px;
  }

  .work-intro h1 {
    font-size:
      clamp(
        44px,
        12vw,
        58px
      );
  }

  .application-type-section {
    width:
      min(
        440px,
        calc(100% - 24px)
      );

    margin-bottom:
      55px;
  }

  .application-type-grid {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }

  .application-type-card {
    max-width:
      390px;
  }

  .type-image-wrap {
    aspect-ratio:
      16 / 10;
  }

  .type-card-body {
    padding:
      18px
      18px
      20px;
  }

  .type-card-body strong {
    font-size:
      28px;
  }

  .application-wrapper {
    width:
      calc(100% - 24px);

    margin-bottom:
      50px;
  }

  .application-card {
    padding:
      29px
      20px;

    border-radius:
      24px;
  }

  .selected-application-header {
    align-items:
      flex-start;
  }

  .selected-application-header h2 {
    font-size:
      34px;
  }

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

  .full {
    grid-column:
      auto;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 480px) {

  .selected-application-header {
    flex-direction:
      column;
  }

  .change-application-btn {
    align-self:
      flex-start;
  }

  .submit-btn {
    font-size:
      9.5px;

    letter-spacing:
      1.5px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation:
      none !important;

    transition:
      none !important;
  }

}

/* =========================================================
   APPLICATION FORM STATUS
========================================================= */

.form-message {
  min-height: 22px;

  margin-top: 14px;

  padding: 0;

  text-align: center;

  font-size: 11px;

  line-height: 1.6;
}


.form-message.success {
  padding: 14px 18px;

  border:
    1px solid
    rgba(63, 143, 103, .18);

  border-radius: 14px;

  background:
    #edf8f2;

  color:
    #3f8f67;

  font-weight: 700;
}


.form-message.error {
  padding: 14px 18px;

  border:
    1px solid
    rgba(190, 76, 91, .16);

  border-radius: 14px;

  background:
    #fff1f2;

  color:
    #b74f5d;

  font-weight: 700;
}