/* ==========================================================
   CLEARCODE CREATIVE V2
   CONTACT PAGE
========================================================== */


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

body {

  background:
    #c3c4c8;

}


.nav-current::after {

  transform:
    scaleX(1) !important;

}



/* ==========================================================
   HERO
========================================================== */

.contact-hero-v2 {

  position:
    relative;

  min-height:
    100vh;

  padding:
    calc(var(--header-height) + 48px)
    0
    35px;

  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 77% 26%,
      rgba(100, 105, 128, 0.16),
      transparent 34%
    ),

    radial-gradient(
      circle at 20% 75%,
      rgba(109, 101, 125, 0.08),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #c2c3c7,
      #b8babf
    );

}


.contact-grid-lines {

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.52;

  background-image:

    linear-gradient(
      90deg,
      transparent calc(25% - 0.5px),
      rgba(20, 22, 27, 0.08) 25%,
      transparent calc(25% + 0.5px)
    ),

    linear-gradient(
      90deg,
      transparent calc(50% - 0.5px),
      rgba(20, 22, 27, 0.08) 50%,
      transparent calc(50% + 0.5px)
    ),

    linear-gradient(
      90deg,
      transparent calc(75% - 0.5px),
      rgba(20, 22, 27, 0.08) 75%,
      transparent calc(75% + 0.5px)
    );

}


.contact-hero-shell {

  position:
    relative;

  z-index:
    2;

  width:
    min(
      calc(100% - 64px),
      1450px
    );

  min-height:
    calc(
      100vh
      - var(--header-height)
      - 83px
    );

  margin:
    0 auto;

  display:
    flex;

  flex-direction:
    column;

}


.contact-meta {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding-bottom:
    23px;

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

  color:
    #62656e;

  font-family:
    var(--mono);

  font-size:
    0.56rem;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


.contact-hero-main {

  flex:
    1;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.03fr)
    minmax(420px, 0.72fr);

  gap:
    clamp(
      45px,
      8vw,
      125px
    );

  align-items:
    center;

  padding:
    65px 0;

}


.contact-hero-copy h1 {

  max-width:
    900px;

  font-size:
    clamp(
      4.6rem,
      7.6vw,
      8.7rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.08em;

  line-height:
    0.88;

}


.contact-hero-copy h1 em {

  display:
    block;

  margin-top:
    4px;

  color:
    #676277;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.contact-hero-bottom {

  max-width:
    710px;

  margin-top:
    48px;

  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    45px;

  align-items:
    end;

}


.contact-hero-bottom p {

  max-width:
    400px;

  color:
    #50535b;

  font-size:
    0.88rem;

  line-height:
    1.8;

}


.contact-hero-footer {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding-top:
    22px;

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

  color:
    #61646c;

  font-family:
    var(--mono);

  font-size:
    0.5rem;

  letter-spacing:
    0.13em;

}



/* ==========================================================
   CONTACT ART
========================================================== */

.contact-art {

  position:
    relative;

  min-height:
    580px;

  overflow:
    hidden;

  color:
    #dfe0e4;

  background:

    radial-gradient(
      circle at 77% 20%,
      rgba(92, 106, 137, 0.34),
      transparent 30%
    ),

    radial-gradient(
      circle at 18% 78%,
      rgba(112, 102, 130, 0.27),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      #29303c,
      #191d25 60%,
      #14171d
    );

  box-shadow:
    0 35px 80px
    rgba(15, 18, 25, 0.14);

  transform:
    rotate(1deg);

}


.contact-art-grid {

  position:
    absolute;

  inset:
    0;

  opacity:
    0.13;

  background-image:

    linear-gradient(
      rgba(255,255,255,0.15)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.15)
      1px,
      transparent 1px
    );

  background-size:
    88px 88px;

}


.contact-circle {

  position:
    absolute;

  border:
    1px solid
    rgba(178,176,194,0.19);

  border-radius:
    50%;

}


.circle-one {

  width:
    420px;

  height:
    420px;

  top:
    -230px;

  right:
    -125px;

}


.circle-two {

  width:
    540px;

  height:
    540px;

  bottom:
    -365px;

  left:
    -260px;

}


.contact-art-top {

  position:
    relative;

  z-index:
    3;

  display:
    flex;

  justify-content:
    space-between;

  padding:
    27px 30px;

  border-bottom:
    1px solid
    rgba(255,255,255,0.13);

  font-family:
    var(--mono);

  font-size:
    0.5rem;

  letter-spacing:
    0.14em;

}


.contact-art-center {

  position:
    relative;

  z-index:
    3;

  min-height:
    400px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

}


.contact-art-center small {

  margin-bottom:
    28px;

  color:
    rgba(255,255,255,0.38);

  font-family:
    var(--mono);

  font-size:
    0.49rem;

  letter-spacing:
    0.2em;

}


.contact-art-center h2 {

  display:
    flex;

  align-items:
    center;

  gap:
    22px;

  font-family:
    var(--serif);

  font-size:
    clamp(
      4.3rem,
      6.6vw,
      7rem
    );

  font-style:
    italic;

  font-weight:
    500;

  letter-spacing:
    -0.07em;

  line-height:
    0.9;

}


.contact-art-center h2 span {

  color:
    #9a96aa;

  font-family:
    var(--mono);

  font-size:
    0.45em;

  font-style:
    normal;

}


.contact-art-center p {

  margin-top:
    34px;

  color:
    rgba(255,255,255,0.45);

  font-family:
    var(--mono);

  font-size:
    0.47rem;

  letter-spacing:
    0.17em;

}


.contact-art-note {

  position:
    absolute;

  left:
    27px;

  bottom:
    91px;

  z-index:
    4;

  color:
    #aaa6b9;

  font-family:
    var(--mono);

  font-size:
    0.48rem;

  transform:
    rotate(-3deg);

}


.contact-art-bottom {

  position:
    relative;

  z-index:
    3;

  min-height:
    72px;

  padding:
    0 30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid
    rgba(255,255,255,0.13);

  font-family:
    var(--mono);

  font-size:
    0.46rem;

  letter-spacing:
    0.13em;

}



/* ==========================================================
   START OPTIONS
========================================================== */

.start-options-section {

  padding:
    150px 0;

  background:
    #bbbcc0;

}


.start-options-heading {

  margin-bottom:
    70px;

}


.start-options-heading h2 {

  margin-top:
    18px;

  font-size:
    clamp(
      4rem,
      6vw,
      7rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.075em;

  line-height:
    0.9;

}


.start-options-heading h2 em {

  display:
    block;

  color:
    #686278;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.start-options-grid {

  display:
    grid;

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

  gap:
    20px;

}


.start-option {

  position:
    relative;

  min-height:
    570px;

  padding:
    0 38px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  color:
    #dedfe3;

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;

}


.start-option:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 30px 70px
    rgba(20,23,30,0.14);

}


.start-option-primary {

  background:

    radial-gradient(
      circle at 78% 18%,
      rgba(115,108,137,0.31),
      transparent 33%
    ),

    linear-gradient(
      145deg,
      #35343f,
      #202128
    );

}


.start-option-secondary {

  background:

    radial-gradient(
      circle at 20% 78%,
      rgba(80,96,126,0.30),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      #303947,
      #1e252f
    );

}


.option-grid-lines {

  position:
    absolute;

  inset:
    0;

  opacity:
    0.10;

  background-image:

    linear-gradient(
      rgba(255,255,255,0.16)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.16)
      1px,
      transparent 1px
    );

  background-size:
    90px 90px;

}


.start-option-top {

  position:
    relative;

  z-index:
    2;

  min-height:
    84px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    rgba(255,255,255,0.13);

  font-family:
    var(--mono);

  font-size:
    0.5rem;

  letter-spacing:
    0.14em;

}


.start-option-center {

  position:
    relative;

  z-index:
    2;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.start-option-center small {

  margin-bottom:
    24px;

  color:
    rgba(255,255,255,0.4);

  font-family:
    var(--mono);

  font-size:
    0.48rem;

  letter-spacing:
    0.16em;

}


.start-option-center h3 {

  font-size:
    clamp(
      3.3rem,
      5vw,
      5.7rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.07em;

  line-height:
    0.91;

}


.start-option-center h3 em {

  display:
    block;

  color:
    #aaa5b8;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.start-option-secondary
.start-option-center h3 em {

  color:
    #a3adbf;

}


.start-option-center p {

  max-width:
    440px;

  margin-top:
    28px;

  color:
    rgba(255,255,255,0.52);

  font-size:
    0.79rem;

  line-height:
    1.8;

}


.start-option-bottom {

  position:
    relative;

  z-index:
    2;

  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid
    rgba(255,255,255,0.13);

  font-family:
    var(--mono);

  font-size:
    0.48rem;

  letter-spacing:
    0.13em;

}


.start-option-bottom strong {

  font-size:
    1.1rem;

  transition:
    transform 0.25s ease;

}


.start-option:hover
.start-option-bottom strong {

  transform:
    translate(4px, -4px);

}



/* ==========================================================
   CONTACT FORM SECTION
========================================================== */

.contact-form-section {

  padding:
    155px 0;

  color:
    #e2e3e6;

  background:
    #181b22;

}


.contact-form-layout {

  display:
    grid;

  grid-template-columns:
    0.62fr 1fr;

  gap:
    clamp(
      55px,
      9vw,
      135px
    );

  align-items:
    start;

}


.form-intro {

  position:
    sticky;

  top:
    125px;

}


.form-intro h2 {

  margin-top:
    19px;

  font-size:
    clamp(
      3.5rem,
      5vw,
      5.7rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.07em;

  line-height:
    0.92;

}


.form-intro h2 em {

  display:
    block;

  color:
    #aaa5ba;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.form-intro-copy {

  max-width:
    470px;

  margin-top:
    35px;

  color:
    rgba(255,255,255,0.52);

  font-size:
    0.82rem;

  line-height:
    1.85;

}


.direct-contact {

  margin-top:
    48px;

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

}


.direct-contact-row {

  display:
    grid;

  grid-template-columns:
    70px 1fr 20px;

  gap:
    15px;

  align-items:
    center;

  padding:
    24px 0;

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

}


.direct-contact-row > span {

  color:
    rgba(255,255,255,0.37);

  font-family:
    var(--mono);

  font-size:
    0.48rem;

  letter-spacing:
    0.12em;

}


.direct-contact-row strong {

  min-width:
    0;

  overflow-wrap:
    anywhere;

  font-size:
    0.76rem;

  font-weight:
    500;

}


.direct-contact-row em {

  justify-self:
    end;

  font-style:
    normal;

}


.form-side-note {

  margin-top:
    35px;

  display:
    grid;

  grid-template-columns:
    65px 1fr;

  gap:
    18px;

}


.form-side-note span {

  color:
    #9f99b0;

  font-family:
    var(--mono);

  font-size:
    0.48rem;

}


.form-side-note p {

  color:
    rgba(255,255,255,0.40);

  font-size:
    0.72rem;

  line-height:
    1.75;

}



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

.contact-form-card {

  border:
    1px solid
    rgba(255,255,255,0.13);

  background:
    #1e222b;

}


.form-card-top {

  min-height:
    72px;

  padding:
    0 30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    rgba(255,255,255,0.13);

  color:
    rgba(255,255,255,0.47);

  font-family:
    var(--mono);

  font-size:
    0.48rem;

  letter-spacing:
    0.14em;

}


.clearcode-contact-form {

  padding:
    15px 38px 38px;

}


.form-field {

  padding:
    33px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,0.11);

}


.form-field label {

  display:
    flex;

  gap:
    16px;

  margin-bottom:
    17px;

  color:
    #cfd0d4;

  font-size:
    0.75rem;

  font-weight:
    600;

}


.form-field label span {

  color:
    #8f899e;

  font-family:
    var(--mono);

  font-size:
    0.52rem;

  font-weight:
    400;

}


.form-field input,
.form-field select,
.form-field textarea {

  width:
    100%;

  border:
    0;

  border-radius:
    0;

  outline:
    none;

  color:
    #ececef;

  background:
    transparent;

  font-family:
    var(--sans);

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

  font-weight:
    400;

  letter-spacing:
    -0.035em;

}


.form-field input::placeholder,
.form-field textarea::placeholder {

  color:
    rgba(255,255,255,0.22);

}


.form-field select {

  appearance:
    none;

  -webkit-appearance:
    none;

  cursor:
    pointer;

}


.form-field select option {

  color:
    #111;

}


.form-field textarea {

  min-height:
    190px;

  resize:
    vertical;

  line-height:
    1.5;

}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

  color:
    #ffffff;

}


.form-field:focus-within label {

  color:
    #b6b0c5;

}


.form-submit-row {

  padding-top:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}


.form-submit-row p {

  max-width:
    320px;

  color:
    rgba(255,255,255,0.35);

  font-size:
    0.65rem;

  line-height:
    1.65;

}


.contact-submit-button {

  min-height:
    56px;

  padding:
    0 25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    18px;

  border:
    0;

  color:
    #171a20;

  background:
    #aaa6b5;

  font-size:
    0.78rem;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;

}


.contact-submit-button span {

  transition:
    transform 0.25s ease;

}


.contact-submit-button:hover {

  color:
    #ffffff;

  background:
    #58647c;

  transform:
    translateY(-2px);

}


.contact-submit-button:hover span {

  transform:
    translate(4px, -4px);

}



/* ==========================================================
   NEXT STEPS
========================================================== */

.next-section {

  padding:
    155px 0;

  background:
    #c1c2c6;

}


.next-heading {

  display:
    grid;

  grid-template-columns:
    1fr 0.35fr;

  gap:
    70px;

  align-items:
    end;

  margin-bottom:
    90px;

}


.next-heading h2 {

  margin-top:
    18px;

  font-size:
    clamp(
      3.8rem,
      6vw,
      7rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.075em;

  line-height:
    0.91;

}


.next-heading h2 em {

  display:
    block;

  color:
    #666176;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.next-heading > p {

  color:
    #53565e;

  font-size:
    0.82rem;

  line-height:
    1.8;

}


.next-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    25px;

}


.next-step {

  min-height:
    350px;

  padding:
    23px;

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

}


.next-offset {

  margin-top:
    65px;

}


.next-step > span {

  font-family:
    var(--mono);

  font-size:
    0.58rem;

}


.next-step-line {

  width:
    1px;

  height:
    65px;

  margin:
    25px 0;

  background:
    #6c667b;

}


.next-step small {

  color:
    #666a74;

  font-family:
    var(--mono);

  font-size:
    0.49rem;

  letter-spacing:
    0.14em;

}


.next-step h3 {

  margin:
    12px 0 18px;

  font-family:
    var(--serif);

  font-size:
    clamp(
      1.8rem,
      2.5vw,
      2.7rem
    );

  font-style:
    italic;

  font-weight:
    500;

}


.next-step p {

  max-width:
    310px;

  color:
    #565860;

  font-size:
    0.78rem;

  line-height:
    1.8;

}



/* ==========================================================
   FAQ
========================================================== */

.contact-faq-section {

  padding:
    155px 0;

  background:
    #b8babf;

}


.contact-faq-heading {

  max-width:
    1000px;

  margin-bottom:
    85px;

}


.contact-faq-heading h2 {

  margin-top:
    18px;

  font-size:
    clamp(
      3.8rem,
      6vw,
      7rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.075em;

  line-height:
    0.91;

}


.contact-faq-heading h2 em {

  display:
    block;

  color:
    #686277;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.contact-faq-list {

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

}


.contact-faq-row {

  min-height:
    145px;

  display:
    grid;

  grid-template-columns:
    70px
    0.8fr
    1fr;

  gap:
    35px;

  align-items:
    center;

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

  transition:
    padding 0.3s ease,
    background 0.3s ease;

}


.contact-faq-row:hover {

  padding:
    0 22px;

  background:
    rgba(255,255,255,0.10);

}


.faq-number {

  font-family:
    var(--mono);

  font-size:
    0.56rem;

}


.contact-faq-row h3 {

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

  font-weight:
    500;

  letter-spacing:
    -0.04em;

}


.contact-faq-row p {

  max-width:
    560px;

  color:
    #54575e;

  font-size:
    0.78rem;

  line-height:
    1.8;

}



/* ==========================================================
   FINAL CTA
========================================================== */

.contact-final-cta {

  padding:
    110px 0 85px;

  background:

    radial-gradient(
      circle at 84% 10%,
      rgba(174,166,190,0.28),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #858c9b,
      #9794a0
    );

}


.contact-final-shell {

  width:
    min(
      calc(100% - 80px),
      1450px
    );

  margin:
    0 auto;

}


.contact-final-meta {

  display:
    flex;

  justify-content:
    space-between;

  padding-bottom:
    24px;

  border-bottom:
    1px solid rgba(17,17,17,0.25);

  font-family:
    var(--mono);

  font-size:
    0.55rem;

  letter-spacing:
    0.13em;

}


.contact-final-main {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    50px;

  padding:
    75px 0;

}


.contact-final-main h2 {

  font-size:
    clamp(
      5rem,
      9vw,
      10rem
    );

  font-weight:
    600;

  letter-spacing:
    -0.085em;

  line-height:
    0.84;

}


.contact-final-main h2 em {

  display:
    block;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.contact-cta-circle {

  width:
    clamp(
      145px,
      15vw,
      220px
    );

  height:
    clamp(
      145px,
      15vw,
      220px
    );

  flex-shrink:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    50%;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;

}


.contact-cta-circle span {

  font-family:
    var(--mono);

  font-size:
    0.6rem;

}


.contact-cta-circle strong {

  margin-top:
    8px;

  font-size:
    2rem;

}


.contact-cta-circle:hover {

  color:
    white;

  background:
    #181b22;

  transform:
    rotate(7deg);

}


.contact-final-bottom {

  padding-top:
    28px;

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    40px;

  border-top:
    1px solid rgba(17,17,17,0.25);

}


.contact-final-bottom p {

  max-width:
    350px;

  font-size:
    0.78rem;

  line-height:
    1.7;

}



/* ==========================================================
   RESPONSIVE — 1000
========================================================== */

@media
(max-width: 1000px) {

  .contact-hero-main {

    grid-template-columns:
      1fr 0.7fr;

    gap:
      50px;

  }


  .contact-form-layout {

    grid-template-columns:
      0.6fr 1fr;

    gap:
      60px;

  }

}



/* ==========================================================
   RESPONSIVE — 900
========================================================== */

@media
(max-width: 900px) {

  .contact-hero-shell {

    width:
      calc(100% - 38px);

  }


  .contact-hero-main {

    grid-template-columns:
      1fr;

  }


  .contact-art {

    width:
      90%;

    min-height:
      520px;

    margin-left:
      auto;

  }


  .start-options-grid {

    grid-template-columns:
      1fr;

  }


  .contact-form-layout {

    grid-template-columns:
      1fr;

  }


  .form-intro {

    position:
      static;

  }


  .form-intro-copy {

    max-width:
      600px;

  }


  .next-heading {

    grid-template-columns:
      1fr;

    gap:
      25px;

  }


  .next-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }


  .contact-faq-row {

    grid-template-columns:
      50px 0.8fr 1fr;

  }

}



/* ==========================================================
   RESPONSIVE — 650
========================================================== */

@media
(max-width: 650px) {

  .contact-hero-v2 {

    min-height:
      auto;

    padding-top:
      calc(var(--header-height) + 30px);

  }


  .contact-hero-shell {

    width:
      calc(100% - 30px);

  }


  .contact-meta
  span:nth-child(2),
  .contact-meta
  span:nth-child(3) {

    display:
      none;

  }


  .contact-hero-copy h1 {

    font-size:
      clamp(
        3.8rem,
        17vw,
        5.6rem
      );

  }


  .contact-hero-bottom {

    grid-template-columns:
      1fr;

    gap:
      25px;

  }


  .contact-art {

    width:
      100%;

    min-height:
      460px;

  }


  .contact-art-center h2 {

    flex-wrap:
      wrap;

    justify-content:
      center;

    font-size:
      4rem;

  }


  .contact-hero-footer {

    flex-wrap:
      wrap;

  }


  .start-options-section,
  .contact-form-section,
  .next-section,
  .contact-faq-section {

    padding:
      100px 0;

  }


  .start-options-heading h2,
  .form-intro h2,
  .next-heading h2,
  .contact-faq-heading h2 {

    font-size:
      clamp(
        3.2rem,
        14vw,
        4.8rem
      );

  }


  .start-option {

    min-height:
      490px;

    padding:
      0 22px;

  }


  .start-option-center h3 {

    font-size:
      clamp(
        3.1rem,
        14vw,
        4.7rem
      );

  }


  .clearcode-contact-form {

    padding:
      10px 22px 28px;

  }


  .form-card-top {

    padding:
      0 22px;

  }


  .form-submit-row {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .contact-submit-button {

    width:
      100%;

  }


  .next-grid {

    grid-template-columns:
      1fr;

  }


  .next-step {

    min-height:
      auto;

    padding:
      24px 0 50px;

  }


  .next-offset {

    margin-top:
      0;

  }


  .contact-faq-row {

    grid-template-columns:
      35px 1fr;

    gap:
      15px;

    padding:
      28px 0;

  }


  .contact-faq-row p {

    grid-column:
      2 / 3;

  }


  .contact-final-cta {

    padding:
      80px 0 55px;

  }


  .contact-final-shell {

    width:
      calc(100% - 34px);

  }


  .contact-final-main {

    display:
      block;

  }


  .contact-final-main h2 {

    font-size:
      clamp(
        4.3rem,
        18vw,
        6rem
      );

  }


  .contact-cta-circle {

    width:
      135px;

    height:
      135px;

    margin:
      45px 0 0 auto;

  }


  .contact-final-bottom {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}

/* ==========================================================
   CONTACT SELECT — SMALLER OPTION TEXT
========================================================== */

.form-field select {

  font-size:
    1rem;

  letter-spacing:
    -0.01em;

  line-height:
    1.4;

  padding:
    8px 0;

}


.form-field select option {

  font-size:
    1rem;

  line-height:
    1.4;

}


/* ==========================================================
   CONTACT FORM STATUS
========================================================== */

.contact-form-status {

  min-height:
    18px;

  margin-top:
    10px;

  font-family:
    var(--mono);

  font-size:
    0.58rem !important;

  letter-spacing:
    0.03em;

}


.contact-form-status.success {

  color:
    #b5c6b9;

}


.contact-form-status.error {

  color:
    #d3a5a5;

}


.contact-submit-button:disabled {

  opacity:
    0.55;

  cursor:
    wait;

  transform:
    none;

}