/*
font-family: 'Proxima Nova', sans-serif;
font-family: 'Squada One', sans-serif;
*/

:root {
  --white: #FFFFFF;
  --black: #000000;
  --orange: #FDC116;
  --darkgray: #5C5C5C;
  --gray: #808285;
  --mediumgray: #D9D9D9;
  --lightgray: #EBEBEB;
  --red: #B7262F;

  --site-width: 1200px;
  --toggle-width: 2.5rem;
  --toggle-height: 0.375rem;
  --toggle-color: var(--white);
  
  --chevron-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.586 5.586c-.781.781-.781 2.047 0 2.828l3.585 3.586-3.585 3.586c-.781.781-.781 2.047 0 2.828.39.391.902.586 1.414.586s1.024-.195 1.414-.586l6.415-6.414-6.415-6.414c-.78-.781-2.048-.781-2.828 0z'/%3E%3C/svg%3E");

  --file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5'/%3E%3Cpath d='M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

BODY {
  margin: 0; padding: 0; background: var(--white); color: var(--black);
  font-family: 'Proxima Nova', sans-serif; font-weight: 600;
  font-size: 1rem; line-height: 1;
}

IMG {
  border: 0; max-width: 100%; height: auto;
  &.shadow { box-shadow: 0 0 1.5625rem 0 rgba(0,0,0,0.35); }
}

A {
  color: var(--orange); text-decoration: none; transition: all 0.2s;

  &:hover { color: var(--black); }

  &.button {
    display: inline-block; border: 0.4375rem solid var(--orange);
    box-sizing: border-box; padding: 0.9em 1.1em 0.7em 1.2em; color: var(--black);
    font-weight: 900; font-size: 0.8125rem; line-height: 1; letter-spacing: 0.1em;
    text-align: center;

    &:hover { background: var(--orange); color: var(--white); }
  }
}

HR {
  display: block; margin: 1em 0; padding: 0; height: 0;
  border: 0; border-top: 1px solid var(--orange);
}

H1, H2, H3, H4, H5 {
  margin: 0; font-weight: 400; line-height: 1;

  &:is(H1) { margin: 0 0 0.25em; font: 2.625rem/1.15 'Squada One', sans-serif; }

  &:is(H2) {
    margin: 4em 0 0; font-weight: 900; font-size: 0.875rem; letter-spacing: 0.3em;

    &.slashes {
      display: flex; align-items: center; margin: 1em 0 0.25em;
      font: 400 1.875rem/1 'Squada One', sans-serif; letter-spacing: 0;
      text-transform: uppercase;

      &:after {
        content: ""; flex-grow: 100; height: 0.84375em; margin-left: 0.5em;
        background: repeating-linear-gradient(109deg, transparent, transparent 21px, var(--orange) 21px, var(--orange) 25px);
      }
    }
  }

  &:is(H3) {
    margin: 0 0 0.3em; font: 3.375rem/1 'Squada One', sans-serif;
    letter-spacing: 0.03em;
  }
  &:is(H4) {
    margin: 0 0 0.3em; font-weight: 800; font-size: 1.375rem;
    letter-spacing: 0.05em;
  }
  &:is(H5) { margin: 0 0 0.1em; font-weight: 800; font-size: 1.25rem; }
}

UL {
  margin: 0 0 0 0.7em; padding: 0 0 0 0.7em;

  &.slash {
    margin: 0; padding: 0 0 0 0.4em; list-style-type: '/';
    LI { padding-left: 0.6em; &::marker { color: var(--orange); } }
  }

  &.double-space LI { padding-bottom: 1em; line-height: 1.2; }
}

OL {
  margin: 1em 0; padding: 0 0 0 1.1em;

  LI {
    padding: 0 0 0.8em 0.1em;
    &::marker { color: var(--orange); }
  }
}

.site-width {
  width: var(--site-width); margin: 0 auto;

  @media (max-width: 1260px) { & { width: 96%; } }
}

/*.site-width:after,*/
.cf:after {
  content: "";
  display: table;
  clear: both;
}

.yellowtext { color: #FDC116; }

/* HEADER */
HEADER {
  position: sticky; top: 0; z-index: 1001; transition: all 5s;
  background: linear-gradient(to right, var(--white) 50%, var(--black) 50%);
  box-shadow: 0 0 1.5625rem 0 rgba(0,0,0,0.25);
  
  @media (max-width: 800px) { & { position: relative; } }

  BODY.scrolling & {
    background: linear-gradient(to right, var(--white) 50%, var(--orange) 50%);
  }

  SECTION {
    display: flex; justify-content: space-between; align-items: center;
    width: 1256px; margin: 0 auto;
    background: linear-gradient(to right, var(--white) 247px, var(--black) 247px);

    @media (max-width: 1290px) { & {
      width: 96%;
      background: linear-gradient(to right, var(--white) 19vw, var(--black) 19vw);
    } }

    BODY.scrolling & {
      width: var(--site-width);
      background: linear-gradient(to right, var(--white) 151px, var(--orange) 151px);

      @media (max-width: 1230px) { & { width: 96%; } }
    }
  }
}

#logo {
  display: flex; padding: 1.125rem 2.375rem 1.125rem 0; background: var(--white);
  position: relative;

  @media (max-width: 1000px) { & { padding-right: 3vw; } }
  @media (max-width: 800px) { & { padding-right: 1.5rem; } }

  &:after {
    content: ""; position: absolute; inset: 0 0 0 auto; width: 1.75rem;
    background: inherit; transform: skewX(-15deg) translateX(50%);
  }

  BODY.scrolling & {
    padding: 0.6875rem 4.25rem 0.6875rem 0;

    @media (max-width: 1050px) { & { padding-right: 1.75rem; } }

    &:after { width: 1.25rem; }
  }

  IMG {
    width: 15.4375rem; aspect-ratio: 500 / 136;

    BODY.scrolling & { width: 9.4375rem; }

    @media (max-width: 1000px) { & { width: 11.5rem; } }
  }
}

#toggle-menu {
  display: none;

  + LABEL {
    position: relative; display: none; margin: 0; box-sizing: border-box;
    padding: calc(var(--toggle-height) * 2.5) 0;
    width: var(--toggle-width); height: var(--toggle-height); cursor: pointer;
    background: linear-gradient(transparent, transparent calc(var(--toggle-height) * 2), var(--toggle-color) calc(var(--toggle-height) * 2), var(--toggle-color) calc(var(--toggle-height) * 3), transparent calc(var(--toggle-height) * 3), transparent ); transition: all 0.3s ease-in-out;

    @media (max-width: 800px) { & { display: block; } }

    &:before, &:after {
      content: ""; position: absolute; top: 0; left: 0;
      width: 100%; height: var(--toggle-height); background: var(--toggle-color);
      transition: all 0.15s ease-in-out;
    }

    &:after { top: auto; bottom: 0; }

    + UL {
      display: flex; justify-content: flex-end; align-items: center; gap: 0 2em;
      margin: 0; padding: 0; list-style-type: none; font-weight: 800;
      font-size: 1.0625rem; line-height: 1; letter-spacing: 0.1em;
      text-transform: uppercase;

      @media (max-width: 1290px) { & { font-size: 1.24vw; } }

      @media (max-width: 800px) { & {
        flex-direction: column; position: absolute; top: -9999999px; left: 0;
        z-index: 9; width: 100%; padding: 0.7em 0; background: var(--black);
        font-size: 3rem; text-align: center;

        BODY.scrolling & { background: var(--orange); }
      } }

      @media (max-width: 450px) { & { font-size: 10.5vw; } }

      > LI {
        position: relative;

        &.phone {
          border: 0.36em solid var(--white); padding: 0.7em 1em;
          color: var(--white); white-space: nowrap;

          @media (max-width: 800px) { & {
            border: 0; padding: 0.8rem 0; font-size: 3rem;
          } }

          @media (max-width: 450px) { & { font-size: 10.5vw; } }

          BODY.scrolling & {
            border: 0; padding: 0; color: var(--black);

            @media (max-width: 800px) { & { border: 0; padding: 0.8rem 0; } }
          }
        }

        A {
          color: var(--orange); position: relative;

          @media (max-width: 800px) { & {
            display: inline-block; padding: 0.8rem 0; color: var(--white);
          } }

          BODY.scrolling & { color: var(--black); }

          &:before, &:after {
            content: ""; position: absolute; width: 0; transition: all 0.5s ease;
            border-bottom: 1px solid var(--orange);
          }

          BODY.scrolling &:before,
          BODY.scrolling &:after { border-color: var(--black); }

          &:before { left: 0; bottom: -5px; }
          &:after { right: 0; bottom: -6px; }

          @media (max-width: 800px) {
            &:before { bottom: 6px; border-color: var(--white); }
            &:after { bottom: 5px; border-color: var(--white); }
          }

          &:hover:before, &:hover:after { width: 100%; }
        }

        UL {
          display: none; position: absolute; top: 110%; left: -1em; z-index: 9;
          flex-direction: column; padding: 0.5em 1em; list-style-type: none;
          background: var(--black); font-size: 80%;

          @media (max-width: 800px) { & {
            display: flex; position: static; margin: 0; padding: 0; border: 0;
            background: transparent; font-size: 80%;
          } }

          BODY.scrolling & { background: var(--orange); }

          LI A {
            display: inline-block; margin: 0.5em 0;

            @media (max-width: 800px) { & { margin: 0; } }

            BODY.scrolling & { color: var(--black); }
          }
        }

        &:hover UL {
          display: flex;

          LI A {
            color: var(--orange);
            @media (max-width: 800px) { & { color: var(--white); } }
          }
        }
      }
    }
  }

  &:checked + LABEL {
    background: transparent;

    &:before, &:after { top: 50%; translate: 0 -50%; rotate: 45deg; }

    &:after { rotate: -45deg; }

    + UL { top: 100%; }
  }
}

/* FOOTER */
FOOTER {
  padding-bottom: 2.3em; background: var(--black); color: var(--orange);
  font-weight: 800; letter-spacing: 0.1em; text-align: center;

  A { color: var(--orange); }

  #prefooter {
    margin-bottom: 2.3em; padding: 3em 0;
    background: var(--white); color: var(--black);

    IMG { width: 7.25rem; height: auto; }

    UL {
      display: flex; justify-content: center; flex-wrap: wrap; gap: 1em 2em;
      margin: 3em auto 0; padding: 0; list-style-type: none; font-weight: 900;
      text-transform: uppercase;

      LI {
        &:before { content: "/"; margin-right: 1.9em; }
        &:first-of-type:before { content: ''; margin-right: 0; }

        @media (max-width: 750px) { &:last-of-type { padding: 0 5vw; } }
        @media (max-width: 750px) { &:last-of-type:before { display: none; } }

        A {
          color: var(--black);
          &:hover { color: var(--orange); }
        }
      }

      @media (max-width: 900px) { & {
        gap: 1em;
        LI:before { margin-right: 0.9em; }
      } }

      @media (max-width: 600px) { & {
        width: 86%; gap: 1em 2em; font-size: 1.125rem;
        LI:before { margin-right: 1.9em; }
        LI:nth-of-type(3):before { display: none; }
      } }

      @media (max-width: 450px) { & { width: 96%; } }
    }
  }

  .locations {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 1em 42px; margin-bottom: 1em;

    @media (max-width: 1110px) { & { gap: 1em 3vw; } }
    @media (max-width: 640px) { & { flex-direction: column; } }

    DIV {
      white-space: nowrap;

      @media (max-width: 1038px) { &:last-of-type { padding: 0 3vw; } }

      &:before { content: '\2022'; margin-right: 42px; }
      &:first-of-type:before { content: ''; margin-right: 0; }

      @media (max-width: 1110px) { &:before { margin-right: 3vw; } }
      @media (max-width: 1040px) { &:last-of-type:before { display: none; } }
      @media (max-width: 640px) { &:before { display: none; } }
    }
  }

  #copyright {
    margin-top: 1rem; color: var(--gray); font-weight: 600; font-size: 0.6875rem;
    line-height: 1; letter-spacing: 0;

    A { color: var(--gray); }
  }
}

/* MULTIPLE PAGES */
#page-header {
  display: flex; align-items: center; min-height: 17.5rem; padding: 3.8em 0;
  background: var(--orange); font-weight: 400; font-size: 1.125rem;
  line-height: 1.6; position: relative;

  @media (max-width: 600px) { & { min-height: 0; flex-direction: column; } }
  @media (max-width: 600px) { &:has(FIGURE) { padding-bottom: 0; } }

  &:not(:has(FIGURE)) {
    min-height: 0;

    &:after {
      content: ""; position: absolute; right: 0; bottom: -0.9375rem; z-index: 2;
      width: 85%; height: 1.875rem; background: var(--black);
    }

    .text {
      width: var(--site-width); margin: 0 auto;

      @media (max-width: 1260px) { & { width: 96%; } }

      H2 { margin-top: 2em; }
    }
  }

  .text {
    width: 33rem; margin-left: calc((100% - var(--site-width)) / 2);

    @media (max-width: 1260px) { & { width: 41.905vw; margin-left: 2%; } }
    @media (max-width: 600px) { & { width: 96%; margin: 0 auto 4.25rem; } }

    H1 { margin: 0 0 0.25em; font: normal 2.625rem/1.15 'Squada One', sans-serif; }

    H2 {
      display: flex; align-items: center; width: auto; margin: 4em 0 0;
      font-weight: 900; font-size: 0.875rem; line-height: 1; letter-spacing: 0.3em;
      text-transform: uppercase;

      &:after {
        content: ''; width: 1em; aspect-ratio: 1; margin-left: 0.25em;
        rotate: 90deg; background: var(--chevron-right) no-repeat center;
      }
    }

    H3 {
      margin: 0.7em 0 0; font: 800 1.875rem/1 'Proxima Nova', sans-serif;
      letter-spacing: 0.05em;

      A { color: var(--black); }
    }
  }

  FIGURE {
    position: absolute; top: 0; right: 0; width: 50.69vw; height: calc(100% + 35px);
    margin: 0; background-position: center; background-repeat: no-repeat;
    background-size: cover;

    @media (max-width: 600px) { & {
      position: relative; width: 100%; aspect-ratio: 600 / 372; margin: 0;
    } }

    &:after {
      content: ""; position: absolute; right: 0; bottom: -1.875rem; z-index: -1;
      width: 69%; height: 1.875rem; background: var(--black);
    }
  }
}

#carboncure {
  display: block; width: 850px; height: 275px; margin: 4em auto 0;
  @media (max-width: 900px) { & { width: 100%; } }
}

#order-concrete {
  padding: 3.3em 2%; background: var(--orange); font-weight: 900;
  font-size: 1.25rem; line-height: 1; letter-spacing: 0.1em; text-align: center;

  &.white { background: var(--white); }

  H1 { font-size: 3.75rem; }

  A {
    display: inline-block; border: 0.4375rem solid var(--black);
    padding: 1em 1.2em 0.8em; color: var(--black); text-transform: uppercase;

    &:hover { background: var(--black); color: var(--orange); }
  }
}

#testimonials {
  margin-bottom: 0; padding: 3.5em 0 4.5em; background: var(--black);
  color: var(--white); font: 1.875rem/1.6 'Squada One', sans-serif;
  letter-spacing: 0.05em; text-align: center;

  @media (max-width: 600px) { & { font-size: 1.5rem; } }

  .f-carousel__slide {
    display: flex; flex-direction: column; justify-content: center;
    box-sizing: border-box; padding: 0 11%;

    @media (max-width: 600px) { & { padding: 0 5%; } }

    .attr {
      margin-top: 2em; font: 600 0.9375rem/1 'Proxima Nova', sans-serif;

      &:before { content: '/'; color: var(--orange); margin-right: 0.5em; }
    }
  }

  .f-carousel__dots {
    top: auto; bottom: 3rem;

    .f-carousel__dot {
      opacity: 1;

      &:after {
        background: transparent; border: 0.1875rem solid var(--orange);
        width: 0.25rem; height: 0.25rem;
      }

      &[aria-current="true"]:after, &:hover:after { background: var(--orange); }
    }
  }
}

#footer-images {
  display: flex;

  @media (max-width: 600px) { & { flex-direction: column; } }

  DIV {
    width: 33.33%; aspect-ratio: 100 / 68.39; background-repeat: no-repeat;
    background-position: center; background-size: cover;

    @media (max-width: 600px) { & { width: 100%; } }
  }
}

FORM {
  INPUT[name="username"] { position: absolute; left: -999999999px; }

  INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
  TEXTAREA, SELECT {
    width: 100%; box-sizing: border-box; margin: 0 0 1.5em; outline: 0;
    border: 0; padding: 0.8em 1.6em; background: var(--black); color: var(--white);
    font: 800 1.125rem/1 'Proxima Nova'; transition: all 0.2s;
    -webkit-appearance: none; appearance: none;

    .col2 & {
      width: 48.66%;
      @media (max-width: 600px) { & { width: 100%; } }
    } 

    &:is(TEXTAREA) { padding: 1.6em; height: 15.5rem; }

    &:is(SELECT) {
      line-height: 1.25; cursor: pointer;
      -webkit-appearance: menulist-button; appearance: menulist-button;
    }

    &:-ms-input-placeholder { color: var(--white); }
    &::placeholder { color: var(--white); opacity: 1; }
    &:focus:-ms-input-placeholder { color: transparent; }
    &:focus::placeholder { color: transparent; opacity: 0; }

    &.alert {
      outline: 0.125rem solid var(--red);

      &:-ms-input-placeholder { color: var(--red); }
      &::placeholder { color: var(--red); opacity: 1; }
      &:focus:-ms-input-placeholder { color: transparent; }
      &:focus::placeholder { color: transparent; opacity: 0; }
    }
  }

  INPUT[type="checkbox"],
  INPUT[type="radio"] {
    outline: 0; border: 0; border-radius: 50%; width: 1.125rem; height: 1.125rem;
    margin: 0; background: var(--black); cursor: pointer;
    box-shadow: inset 0 0 0 0.3125rem var(--black);
    -webkit-appearance: none; appearance: none;

    &:checked { background: var(--orange); }
  }

  LABEL:has(INPUT[type="radio"], INPUT[type="checkbox"]) {
    display: flex; justify-content: center; align-items: center; gap: 0 0.25em;
  }

  LABEL:has(INPUT[type="checkbox"]) { margin-bottom: 1.5em; }

  .radio {
    display: inline-flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 0.6em 1.2em; margin-bottom: 1.5em;

    &:has(.alert) {
      outline: 0.125rem solid var(--red); padding: 0.5em 0;
      &:after { content: 'REQUIRED'; width: 100%; color: var(--red); }
    }

    @media (max-width: 500px) { & SPAN { width: 100%; } }
  }

  .col2 {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap;
  }

  BUTTON, INPUT[type="submit"] {
    display: inline-block; box-sizing: border-box; outline: 0; cursor: pointer;
    border: 0.4375rem solid var(--black); padding: 0.9em 1.1em 0.7em 1.2em;
    background: transparent; color: var(--black); text-align: center;
    font: 900 0.875rem/1 'Proxima Nova'; letter-spacing: 0.1em;
    text-transform: uppercase; transition: all 0.2s;
    -webkit-appearance: none; appearance: none;
    
    &:hover { background: var(--black); color: var(--white); }

    &.loader {
      border-color: #A0A0A0; background: #A0A0A0; color: #D8D8D8;
      pointer-events: none; position: relative;

      &:before {
        content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
        height: 100%; aspect-ratio: 1; box-sizing: border-box; border-radius: 50%;
        border: 0.3rem solid var(--white); border-top-color: var(--orange);
        animation: spin 1s linear infinite;
      }
    }
  }
}

@keyframes spin { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }

DIALOG {
  border: 0; width: 31.25rem; padding: 0; box-sizing: border-box;
  font-size: 1.5rem; line-height: 1.2; overflow: visible;

  @media (max-width: 550px) { & { width: 96%; } }

  &::backdrop { background: rgba(0,0,0,0.8); }

  > BUTTON {
    position: absolute; top: -1rem; right: -1rem; width: 2rem; height: 2rem;
    padding: 0; border-radius: 50%; border: 0.125rem solid var(--white);
    background: var(--black); color: var(--white);font-size: 1rem; line-height: 1;
    cursor: pointer;

    &:hover { background: var(--red); }
  }

  > DIV { padding: 1.75rem 2rem; }
}

#calculator {
  width: 49.58%;

  @media (max-width: 750px) { & { width: 100%; } }

  H2 {
    margin: 0 0 1em 1em; font: normal 2.1875rem/1 'Squada One', sans-serif;
    letter-spacing: 0.03em;
  }

  #calc-form {
    background: var(--lightgray); box-sizing: border-box;
    padding: 2.8125rem 2.1875rem; box-shadow: 0 0 1.5625rem 0 rgba(0,0,0,0.35);

    LABEL {
      display: block; font-weight: 800; font-size: 1.5625rem; text-align: center;
      margin-top: 1.5em;

      @media (750px <= width <= 1000px) { & { font-size: 2.45vw; } }
      @media (max-width: 480px) { & { font-size: 5vw; } }

      INPUT { margin-bottom: 0; }
    }
    
    INPUT {
      margin-bottom: 1.2em; color: var(--orange); font-size: 1.5625rem;
      letter-spacing: 0.1em;
      
      &:-ms-input-placeholder { color: var(--orange); }
      &::placeholder { color: var(--orange); opacity: 1; }
      &:focus:-ms-input-placeholder { color: transparent; }
      &:focus::placeholder { color: transparent; opacity: 0; }
    }

    BUTTON { margin-top: 1em; }
  }
}

/* HOME PAGE */
#home-banner {
  display: grid; justify-content: center; align-items: center; overflow: hidden;
  text-align: center;

  &:after {
    content: ''; grid-area: 1 / 1; z-index: 2; width: 100%; height: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 1px, transparent 1px);
    background-size: 2px 2px;
  }

  > * { grid-area: 1 / 1; z-index: 3; }

  VIDEO {
    height: 684px; width: auto; z-index: 1;

    @media (max-width: 800px) { & { height: 500px; } }
  }

  IMG {
    width: 260px; margin-bottom: 4rem;

    @media (max-width: 800px) { & { width: 210px; } }
  }

  .button {
    color: var(--white); font-size: 1rem; letter-spacing: 0.15em;
    text-transform: uppercase;

    @media (max-width: 800px) { & { font-size: 0.9rem; } }
  }
}

#home-about {
  padding: 2.1em 0; background: var(--orange); color: var(--black);
  font: normal 2.5rem/1.25 'Squada One', sans-serif;

  @media (min-width: 1600px) { & { padding: 1.3em 0; font-size: 2.75rem; } }
  @media (max-width: 1000px) { & { padding: 1.5em 0 1em; } }
  @media (max-width: 900px) { & { font-size: 4.2vw; } }
  @media (max-width: 600px) { & { font-size: 2.5rem; padding-bottom: 68vw; } }

  .site-width {
    position: relative; z-index: 1;

    .text {
      width: 42%;

      @media (min-width: 1600px) { & { width: 45%; } }
      @media (max-width: 1215px) { & { width: 48%; } }
      @media (max-width: 600px) { & { width: 100%; } }

      A {
        display: inline-block; margin-top: 3.5em; color: var(--black);
        font: 900 35%/1 'Proxima Nova', sans-serif; letter-spacing: 0.3em;

        &:after {
          content: '\0203a'; display: inline-block; margin-left: 0.25em;
          font-size: 1.3em;
        }

        &:hover { color: var(--white); }
      }
    }

    .image {
      position: absolute; top: 0; right: 0; width: 41.7vw; aspect-ratio: 100 / 71.5;
      background: url(../images/resources.webp) center center no-repeat;
      background-size: cover; box-shadow: 0 0 1.5625rem 0 rgba(0,0,0,0.35);

      @media (min-width: 1600px) { & { width: 50%; } }
      @media (max-width: 1300px) { & { right: 2%; } }
      @media (max-width: 1215px) { & { width: 46%; } }
      @media (max-width: 600px) { & { margin-top: 7vw; top: 100%; right: 4%; width: 94%; } }

      &:after {
        content: ''; width: 72%; height: 3.125rem; background: var(--black);
        position: absolute; z-index: -1; bottom: -1.5625rem; right: -0.5em;
      }

      @media (max-width: 900px) { &:after { height: 2.5rem; bottom: -1.25rem } }
    }
  }
}

#home-products {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; padding: 5.625rem 0 4.0625rem;

  #slides {
    width: 48%; margin-top: 3em; box-shadow: 0 0 1.5625rem 0 rgba(0,0,0,0.35);

    @media (max-width: 750px) { & { width: 96%; margin: 0 0 5em 2%; } }

    .f-carousel__viewport { z-index: 3; }

    .f-carousel__dots {
      justify-content: flex-start; gap: 0 0.4em; top: calc(100% - 0.75em);
      left: -0.75em; right: auto; z-index: 1; padding: 0.3em 1.3em 0;
      background: var(--black); counter-reset: pslides-counter;

      .f-carousel__dot {
        width: auto; min-width: 1em; height: 3.1em; opacity: 1; color: var(--white);
        font: 600 0.875rem/1 'Proxima Nova', sans-serif; text-align: center;

        &:before {
          counter-increment: pslides-counter; content: counter(pslides-counter);
        }

        &:after { display: none; }

        &[aria-current="true"], &:hover { color: var(--orange); }
      }
    }
  }

  .text {
    width: 330px; margin-right: calc((48% - 330px) / 2); font-weight: 900;
    font-size: 1rem; line-height: 1; letter-spacing: 0.2em; text-align: center;

    @media (max-width: 750px) { & { margin: 0 auto; font-size: 2.5rem; } }

    .blog-index-post {
      margin: 1.625rem auto 0; padding: 2rem 1.8125rem; box-sizing: border-box;
      background: var(--orange); font-weight: 400; font-size: 1.125rem;
      line-height: 1.4; letter-spacing: 0; text-align: left;

      .blog-index-date {
        margin-bottom: 0.5em; color: var(--white); font-weight: 900;
        font-size: 77.77%; line-height: 1; letter-spacing: 0.05em;
      }

      .blog-index-title {
        margin-bottom: 0.5em; font: 900 166.66%/1 'Squada One', sans-serif;
        letter-spacing: 0.03em; text-transform: uppercase;
      }
      
      .center {
        text-align: center;

        .button { padding: 0.6em 1.9em 0.5em 2em; font-size: 77.77%; }
      }
    }

    .button {
      margin-top: 2rem; border-color: var(--black); font-size: 1rem;
      letter-spacing: 0.2em; text-transform: uppercase;

      &:hover { background: var(--black); }
    }
  }
}

/* PRODUCTS */
#products {
  padding: 6.5em 0 2em; font-size: 1.25rem; line-height: 1.5;

  H3, H4, .button { text-transform: uppercase; }

  .col2 {
    display: flex; justify-content: space-between; margin-bottom: 3em;

    @media (max-width: 600px) { & { flex-direction: column; } }

    > DIV {
      width: 45%;
      @media (max-width: 600px) { & { width: 100%; } }
    }
  }

  IMG {
    margin-bottom: 3em; @media (max-width: 600px) { & { margin: 1.2em 0 1.5em; } }
  }
}

/* DECORATIVE PRODUCTS */
#page-header.deco-head {
  @media (max-width: 800px) { & {
    flex-direction: column;

    .text { width: 96%; margin: 0 auto; }
  } }

  H1 { font-size: 54px; letter-spacing: 0.05em; text-transform: uppercase; }

  H2 {
    font-weight: 800; font-size: 1rem; letter-spacing: 0.05em;
    &:after { display: none; }
  }

  FIGURE {
    height: auto; min-height: 29.514vw; box-sizing: border-box;
    background-position: top center; background-size: contain;
    padding-top: 25vw; font-weight: 900; font-size: 1.125rem; line-height: 1.2;
    letter-spacing: 0.2em; text-transform: uppercase;

    @media (max-width: 800px) { & {
      width: 96%; min-height: 0; position: static; margin: 3em auto 0;
      background-size: 100% auto; padding-top: 48%; aspect-ratio: auto;
    } }

    @media (max-width: 600px) { & { padding-bottom: 3.8em; } }

    &:after { display: none; }

    A {
      color: var(--black);

      &[href$=".pdf"] {
        display: inline-flex; align-items: center;

        &:before {
          content: ''; display: inline-flex; width: 1em; height: 1em;
          margin-right: 0.5em; background: var(--black); transition: all 0.2s;
          mask: var(--file) no-repeat left center; mask-size: contain;
        }

        &:hover:before { background: var(--white); }
      }

      &:hover { color: var(--white); }
    }

    SPAN {
      display: inline-flex;

      &:before {
        content: ''; width: 1em; aspect-ratio: 1; margin-right: 0.5em;
        rotate: 90deg; background: var(--chevron-right) no-repeat center;
      }
    }
  }
}

#decorative {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3em 0;
  padding: 3em 0; font: normal 2.5rem/1 'Squada One', sans-serif;
  text-transform: uppercase;

  > DIV {
    width: 49.5%;
    @media (max-width: 900px) { & { width: 45%; } }
    @media (max-width: 600px) { & { width: 100%; } }
  }

  IMG { margin-top: 1em; }
}

/* PORTFOLIO */
.portfolios {
  counter-reset: port-count; padding: 6em 0;

  .portfolio {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 4.125rem; padding-bottom: 1.125rem; position: relative;
    background: repeating-linear-gradient(109deg, transparent, transparent 21px, var(--mediumgray) 21px, var(--mediumgray) 25px) repeat-x bottom;
    background-size: 102% 25px;

    @media (max-width: 800px) { & { flex-direction: column; } }

    &:nth-child(even) { flex-direction: row-reverse; }

    @media (max-width: 800px) { &:nth-child(even) { flex-direction: column; } }

    &:last-of-type { background: transparent; margin: 0; padding: 0; }

    .port-text {
      width: 46vw; position: relative; z-index: 4; box-sizing: border-box;
      padding-left: calc((100vw - var(--site-width)) / 2);

      @media (max-width: 1240px) { & { padding-left: 2%; } }
      @media (max-width: 800px) { & { width: 100%; padding: 0 2%; } }

      .portfolio:nth-child(even) & {
        justify-content: flex-end; text-align: right; padding-left: 0;
        padding-right: calc((100vw - var(--site-width)) / 2);

        @media (max-width: 1240px) { & { padding-right: 2%; } }
        @media (max-width: 800px) { & { justify-content: flex-start; padding-left: 2%; text-align: left; } }
      }

      H3, H4 {
        position: absolute; top: 104px; left: 0; right: auto;
        height: 119px; width: auto; min-width: 51vw; margin: 0;
        box-sizing: border-box; padding-top: 0.463em; padding-right: 0.5em;
        padding-left: calc((100vw - var(--site-width)) / 2);
        background: var(--orange); font-size: 54px; line-height: 1;
        letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;

        @media (max-width: 1240px) { & { padding-left: 1.9vw; } }
        @media (max-width: 1100px) { & {
          height: 10.818vw; font-size: 4.8vw; letter-spacing: 0.03em;
        } }
        @media (max-width: 800px) { & {
          top: 0; min-width: 70%; height: 13vw; font-size: 6.5vw;
        } }

        .portfolio:nth-child(even) & {
          left: auto; right: 0;
          padding-left: 1em; padding-right: calc((100vw - var(--site-width)) / 2);

          @media (max-width: 1240px) { & { padding-right: 1.9vw; } }
          @media (max-width: 800px) { & {
            left: 0; right: auto; padding-left: 1.9vw; padding-right: 1em;
          } }
        }

        &:is(H4) {
          top: 205px; height: auto; min-width: 45vw;
          padding-top: 1em; padding-bottom: 1em;
          background: var(--black); color: var(--orange);
          font-size: 0.75rem; letter-spacing: 0.3em;

          @media (max-width: 1240px) { & { font-size: 0.968vw; } }
          @media (max-width: 1100px) { & { top: calc(104px + 9.182vw); } }
          @media (max-width: 800px) { & {
            top: 10.75vw; min-width: 66%; font-size: 1.35vw;
            padding-top: 1.17em; padding-bottom: 1.17em;
          } }

          &:empty:before, &:empty:after { content: ''; }
          
          &:before, &:after { 
            content: '/ / /'; letter-spacing: 0.1em; margin-right: 0.5em;
          }
          &:after { display: none; margin: 0 0 0 0.5em; }

          .portfolio:nth-child(even) & {
            &:before { display: none; }
            &:after { display: inline-flex; }

            @media (max-width: 800px) { &:before { display: inline-flex; } }
            @media (max-width: 800px) { &:after { display: none; } }
          }
        }
      }

      &:before {
        counter-increment: port-count; content: "#" counter(port-count);
        display: block; padding-bottom: 1.1em; color: rgba(0,0,0,0.15);
        font-weight: 900; font-size: 8.875rem; line-height: 1;
      }

      @media (max-width: 1240px) { &:before { padding-bottom: 12.5vw; } }
      @media (max-width: 800px) { &:before { position: absolute; top: 0; right: 0; padding-bottom: 0; } }

      .text {
        border-left: 0.625rem solid var(--black); padding: 0 5vw 0 1.125rem;
        box-sizing: border-box; font-size: 1.125rem; line-height: 1.4;

        @media (max-width: 1240px) { & {
          font-size: 1.452vw; padding-right: 2.5vw;
        } }
        @media (max-width: 800px) { & { margin-top: 19vw; font-size: 1.125rem; } }

        .portfolio:nth-child(even) & {
          border-left: 0; border-right: 0.625rem solid var(--black);
          padding: 0 1.125rem 0 5vw;

          @media (max-width: 1240px) { & { padding-left: 2.5vw; } }
          @media (max-width: 800px) { & {
            border-left: 0.625rem solid var(--black); border-right: 0;
            padding-right: 2.5vw;
          } }
        }
      }
    }

    .port-image {
      width: 52.5vw; aspect-ratio: 756 / 506; position: relative; z-index: 2;
      margin-bottom: 3.25rem; box-shadow: 0 0 1.5625rem 0 rgba(0,0,0,0.35);

      @media (max-width: 800px) { & { width: 96%; margin: 2rem auto 3.25rem; } }

      .f-carousel__viewport { z-index: 4; }

      .f-carousel__slide {
        background-repeat: no-repeat; background-position: center;
        background-size: cover;
      }

      .f-carousel__dots {
        justify-content: flex-end; gap: 0 0.6em; left: 5%; right: auto;
        width: 82%; box-sizing: border-box; padding: 0 2em; z-index: 3;
        background: var(--black); counter-reset: portslides-counter;
        translate: 0 -1px;

        .portfolio:nth-child(even) & {
          justify-content: flex-start; left: auto; right: 5%;

          @media (max-width: 800px) { & {
            justify-content: flex-end; left: 5%; right: auto;
          } }
        }

        .f-carousel__dot {
          width: auto; min-width: 1em; height: 3.25rem; opacity: 1;
          text-align: center; color: var(--white);
          font: 900 18px/1 'Proxima Nova', sans-serif;

          &:before {
            counter-increment: portslides-counter;
            content: counter(portslides-counter, decimal-leading-zero);
          }

          &:after { display: none; }

          &[aria-current="true"], &:hover { color: var(--orange); }
        }
      }
    }
  }
}

/* COMPANY */
#company {
  display: flex; justify-content: space-between;
  padding: 6.5em 0 2em; font-size: 1.125rem; line-height: 1.8;

  @media (max-width: 600px) { & { flex-direction: column; } }

  ARTICLE { width: 54%; @media (max-width: 600px) { & { width: 100%; } } }

  SIDEBAR {
    width: 23.33%; margin-right: 10%; font-size: 1rem; line-height: 1.5;

    @media (max-width: 1100px) { & { width: 24%; } }
    @media (max-width: 1000px) { & { width: 30%; margin-right: 3%; } }
    @media (max-width: 900px) { & { width: 35%; margin-right: 0; } }
    @media (max-width: 600px) { & { width: 100%; } }

    H3 {
      margin: 0 0 1.5em; font: 800 1.375rem/1 'Proxima Nova', sans-serif;
      letter-spacing: 0.05em; text-transform: uppercase;

      &:first-of-type { margin-top: 2.25em; }
    }

    H4 {
      margin: 0 0 0.1em; font-weight: 800; font-size: 1.25rem;
      letter-spacing: 0; line-height: 1;
    }

    STRONG { color: var(--orange); }

    A {
      color: var(--black); text-decoration: underline;
      &:hover { color: var(--orange); }
    }

    HR { margin: 3em 0; }
  }
}

/* BLOG */
#blog-index {
  width: 1100px; padding: 4.25rem 0;

  @media (max-width: 1150px) { & { width: 96%; } }

  .pagination {
    text-align: right; font-weight: 900; font-size: 1.125rem; line-height: 1;

    SPAN { margin-left: 0.3em; color: var(--orange); }

    A { margin-left: 0.3em; color: var(--black); &:hover { color: var(--orange); } }
  }

  .blog-index-posts {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    padding: 1.25rem 0;

    .blog-index-post {
      width: 30%; margin: 1.625rem 0; padding: 2rem 1.8125rem 6.5625rem;
      box-sizing: border-box; background: var(--orange); font-weight: 400;
      font-size: 1.125rem; line-height: 1.4; position: relative;

      @media (max-width: 900px) { & { width: 46.5%; } }
      @media (max-width: 600px) { & { width: 100%; } }

      .blog-index-date {
        margin: 0 0 0.5em; color: var(--white); font-weight: 900;
        font-size: 77.77%; line-height: 1;
      }

      H3 {
        margin: 0 0 0.5em; font-size: 166.66%; line-height: 1;
        letter-spacing: 0; text-transform: uppercase;
      }

      A {
        position: absolute; bottom: 2rem; left: 50%; translate: -50% 0;
        border-color: var(--black); padding: 0.6em 1.9em 0.5em 2em;
        font-size: 77.77%; text-transform: uppercase; white-space: nowrap;

        &:hover { background: var(--black); }
      }
    }
  }
}

.blog-single-header {
  padding: 2.8em 0 !important;

  .blog-single-date {
    margin: 0; color: var(--white); font-weight: 900;
    font-size: 77.77%; line-height: 1; letter-spacing: 0.3em;
  }

  H1 { margin: 0; line-height: 1; text-transform: uppercase; }
}

#blog-single-post {
  display: flex; justify-content: space-between; gap: 2rem 0; padding: 3.5em 0;
  font-size: 1.25rem; line-height: 1.4;

  @media (max-width: 600px) { & { flex-direction: column-reverse; } }

  #blog-single-sidebar {
    width: 36%;

    @media (max-width: 600px) { & { width: 100%; } }

    .blog-single-image {
      background-repeat: no-repeat; background-position: center;
      background-size: cover; aspect-ratio: 100 / 68; margin-bottom: 1.5em;

      A {
        display: inline-block; margin-bottom: 0.25em; color: var(--orange);
        &:hover { color: var(--black); }
      }
    }

    H3 {
      margin: 0 0 0.5em; font-size: 1.5rem; text-transform: uppercase;
    }
  }

  .blog-single-text {
    width: 60%; margin-left: auto;

    @media (max-width: 600px) { & { width: 100%; } }

    P { margin: 0 0 1.5em; }

    UL { margin: 0 0 0 0.7em; padding: 0 0 0 0.7em; translate: 0 -1.5em; }

    IFRAME {
      width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;
    }

    .aligncenter { display: block; margin: 0 auto 1.4em; }
  }
}

/* ENVIRONMENTAL */
#environmental {
  padding: 6.5em 0 4em; font-size: 1.25rem; line-height: 1.4;

  .intro, .cb {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1.4em 0; padding-bottom: 1.4em;

    @media (max-width: 700px) { & { flex-direction: column-reverse; } }

    > DIV { width: 50%; @media (max-width: 700px) { & { width: 100%; } } }

    IMG { width: 40%; @media (max-width: 700px) { & { width: 100%; } } }
  }

  .col2 {
    columns: 2; column-gap: 15%;
    @media (max-width: 700px) { & { columns: 1; } }
    P { margin: 0 0 1.5em; }
  }

  .cw {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 2em 2%;

    @media (max-width: 700px) { & { flex-direction: column-reverse; } }

    IMG { width: 40%; @media (max-width: 700px) { & { width: 100%; } } }

    > DIV { width: 52.5%; @media (max-width: 700px) { & { width: 100%; } } }

    H3 {
      margin: 0 0 0.25em; font-size: 2.5625rem; letter-spacing: 0;
      text-transform: uppercase;
    }
  }
}

/* RESOURCES */
#resources, #employment {
  padding: 6.5em 0 3em; font-size: 1.25rem; line-height: 1.4;

  .resource, .position {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; margin-top: 0.3125rem; padding: 1.875rem 0; font-size: 1rem;
    line-height: 1.4; border-bottom: 0.1875rem solid var(--lightgray);

    &:has(DETAILS) {
      padding-bottom: 0.875rem;
      @media (max-width: 750px) { & { padding-bottom: 1.875rem; } }
    }

    @media (max-width: 750px) { & {
      flex-direction: column; align-items: flex-start;
    } }

    .text {
      width: 53%;

      @media (max-width: 750px) { & { width: 100%; } }
      
      H3, H4 {
        margin: 0 0 0.25em; font: 900 1.5rem/1 'Proxima Nova';
        letter-spacing: 0.1em; text-transform: uppercase;

        &:is(H4) { margin: 0; color: var(--orange); font-size: 0.75rem; }
      }
    }
    
    .links {
      display: flex; justify-content: flex-end; align-items: center; gap: 1em;
      width: 47%;

      @media (max-width: 750px) { & {
        justify-content: flex-start; flex-wrap: wrap; order: 3; width: 100%;
        padding-top: 1.25em;
      } }
      
      .button {
        min-width: 16.875rem; border-color: var(--black); font-size: 0.875rem;
        text-transform: uppercase;
        
        @media (751px <= width <= 1260px) { & { min-width: 0; } }
        @media (751px <= width <= 1000px) { & { font-size: 1.4vw; } }

        &:hover { background: var(--black); }
      }
    }

    DETAILS {
      width: 100%; interpolate-size: allow-keywords;

      &::details-content {
        opacity: 0; block-size: 0; overflow: clip;
        transition: all 0.4s, content-visibility 0.4s allow-discrete;
      }

      SUMMARY {
        translate: 0 -0.8rem; color: var(--orange); font-weight: 900;
        font-size: 0.875rem; letter-spacing: 0.3em; text-transform: uppercase;
        text-decoration: underline; cursor: pointer; list-style: none;

        @media (max-width: 750px) { & { translate: 0; } }

        &:before { content: 'See '; }
        &:after {
          content: '\0203a'; display: inline-block; margin-left: 0.25em;
          font-size: 1.3em;
        }
      }

      &[open] {
        padding-bottom: 1rem;

        @media (max-width: 750px) { & { padding-bottom: 0; } }

        &::details-content { opacity: 1; block-size: auto; }

        SUMMARY {
          &:before { content: 'Hide '; }
          &:after { rotate: 90deg; translate: 0 0.2em; }
        }
      }
    }
  }
}

#resources-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 3em 0; padding: 1rem 0 5rem;

  @media (max-width: 750px) { & { flex-direction: column-reverse; } }

  IMG { width: 40%; @media (max-width: 750px) { & { width: 100%; } } }
}

/* EMPLOYMENT */
#employment-footer {
  max-width: 80ch; margin-bottom: 3em; color: var(--darkgray); font-weight: 900;
  font-size: 1.125rem; line-height: 1.4; letter-spacing: 0.2em; text-align: center;
  text-transform: uppercase;

  H4 { margin: 0 0 0.75em; font-size: 0.75rem; letter-spacing: 0.4em; }

  A { color: var(--black); &:hover { color: var(--orange); } }
}

#employment-footer-images {
  background: url(../images/employment-footer.webp) no-repeat center;
  background-size: cover; aspect-ratio: 100 / 25;
}

#application {
  margin: 6.5em auto 4em;

  H2 {
    margin: 0.5em 0 0.25em; color: var(--orange); text-transform: uppercase;
    font: 400 1.75rem/1 'Squada One', sans-serif; letter-spacing: 0.05em;
  }

  INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]), TEXTAREA {
    border: 0.4375rem solid rgba(0,0,0,0.75); background: var(--white);
    color: var(--black);

    &:is(TEXTAREA) { height: 8em; }

    &:-ms-input-placeholder { color: rgba(0,0,0,0.4); }
    &::placeholder { color: rgba(0,0,0,0.4); opacity: 1; }
    &:focus:-ms-input-placeholder { color: transparent; }
    &:focus::placeholder { color: transparent; opacity: 0; }

    &.alert {
      border-color: var(--red);

      &:-ms-input-placeholder { color: var(--red); }
      &::placeholder { color: var(--red); opacity: 1; }
      &:focus:-ms-input-placeholder { color: transparent; }
      &:focus::placeholder { color: transparent; opacity: 0; }
    }
  }

  .two-col, .three-col, .four-col, .five-col {
    display: flex; justify-content: space-between; flex-wrap: wrap;

    @media (min-width: 701px) {
      &:is(.two-col) { INPUT { width: 48.66%; } }
      &:is(.three-col) { INPUT { width: 31.54%; } }

      &:is(.five-col) { INPUT:not([type="radio"]) { width: 17.856%; } }
    }

    &:is(.four-col) {
      INPUT {
        width: 23%;

        @media (max-width: 900px) { & { width: 48.66%; } }
        @media (max-width: 700px) { & { width: 100%; } }
      }

      > DIV {
        align-self: center; width: 23%; margin-bottom: 1.5em;
        font: 800 1.125rem/1 'Proxima Nova'; text-transform: uppercase;

        @media (max-width: 900px) { & { width: 48.66%; } }
        @media (max-width: 700px) { & { width: 100%; margin-bottom: 0.5em; } }
      }
    }

    &:is(.five-col) {
      .radio {
        width: 17.856%; text-align: center; align-self: center; gap: 0.2em 1.2em;

        @media (max-width: 700px) { & { width: 100%; padding-bottom: 1em; } }

        > DIV {
          width: 100%; font: 800 1rem/1 'Proxima Nova'; text-transform: uppercase;
        }
      }
    }
  }

  .radio { font-size: 1.125rem; }

  #authorization, #certify { display: none; }

  LABEL[for="authorization"], LABEL[for="certify"] {
    display: inline-block; padding: 0.25em 0.5em 0.25em 1.75em;
    background: var(--orange); position: relative;

    &:before {
      content: ''; position: absolute; translate: -150% 0; border: 0;
      border-radius: 50%; width: 0.9em; height: 0.9em; background: var(--black);
      cursor: pointer; box-shadow: inset 0 0 0 0.25rem var(--black);
    }

    #authorization:checked + &:before,
    #certify:checked + &:before { background: var(--orange); }
  }

  #submit-nullifier {
    cursor: not-allowed;

    &:after {
      content: "Make sure the highlighted checkboxes are checked.";
      display: inline-block; margin: 0.5em 0; padding: 0.25em 0.5em;
      background: var(--orange); cursor: default;
    }

    @media (max-width: 700px) { &:after { display: inline-block; } }

    BUTTON { pointer-events: none; opacity: 0.5; margin-right: 0.5em; }

    #authorization:checked ~ #certify:checked ~ & {
      cursor: default; &:after { display: none; }
      BUTTON { pointer-events: auto; opacity: 1; }
    }
  }
} 
/* CONTACT */
#contact-order {
  display: flex; justify-content: space-between; align-items: center; gap: 3em 0;
  padding: 6.5em 0; font-size: 1.125rem; line-height: 1.4;

  @media (max-width: 750px) { & { flex-direction: column; } }

  .text {
    width: 36.25%;

    @media (max-width: 900px) { & { width: 45%; } }
    @media (max-width: 750px) { & { width: 100%; } }

    H2 {
      margin: 0 0 1.5em; font-weight: 800; font-size: 3.375rem;
      letter-spacing: 0.03em;

      @media (max-width: 800px) { & { font-size: 5.5vw; } }
      @media (max-width: 750px) { & { font-size: 3.375rem; } }
      @media (max-width: 450px) { & { font-size: 12vw; } }

      A { color: var(--black); }
    }

    H3 {
      margin: 0 0 0.3em; font: 800 1.375rem/1 'Proxima Nova';
      letter-spacing: 0.05em;
    }

    .button {
      margin-top: 4em;
      @media (max-width: 450px) { & { margin-top: 1em; } }
    }
  }
}

#contact {
  padding: 6.25rem 0; background: var(--orange); font-weight: 800;
  font-size: 1.125rem; line-height: 1; text-align: center;

  @media (max-width: 600px) { & { padding: 4.6875rem 0; } }

  H4 {
    margin-bottom: 3em; padding: 0 2%; font-size: 1.25rem;
    A { color: var(--black); }
  }

  FORM {
    width: 65vw; margin: 0 auto;
    @media (max-width: 1000px) { & { width: 80%; } }
    @media (max-width: 800px) { & { width: 96%; } }
  }

  .fineprint {
    width: 65vw; margin: 3rem auto 0; font-size: 60%; line-height: 1.2;
    @media (max-width: 1000px) { & { width: 80%; } }
    @media (max-width: 800px) { & { width: 96%; } }
  }
}