/*
Theme Name: Junk Yard Dog
Author: Foresite Group
Author URI: https://foresitegrp.com
Version: 1.0

font-family: "Bebas Neue", sans-serif;
font-family: "Inter", sans-serif;
[Regular: 400, Medium: 500, SemiBold: 600, Bold: 700]
font-family: "Anton", sans-serif;
*/

:root {
  --lightblack: #2D2D2E;
  --black: #121312;
  --lightwhite: #FBFBFB;
  --white: #FFFFFF;
  --darkwhite: #F5F5F5;
  --gray: #BFBFBF;
  --orange: #F07414;

  --site-width: 1240px;
  --toggle-width: 44px;
  --toggle-height: 44px;
  --toggle-bar-height: 0.4rem;
  --toggle-color: var(--white);

  --instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3E%3Cpath d='M1024 768q0-106-75-181t-181-75t-181 75t-75 181t75 181t181 75t181-75t75-181m138 0q0 164-115 279t-279 115t-279-115t-115-279t115-279t279-115t279 115t115 279m108-410q0 38-27 65t-65 27t-65-27t-27-65t27-65t65-27t65 27t27 65M768 138q-7 0-76.5-.5t-105.5 0t-96.5 3t-103 10T315 169q-50 20-88 58t-58 88q-11 29-18.5 71.5t-10 103t-3 96.5t0 105.5t.5 76.5t-.5 76.5t0 105.5t3 96.5t10 103T169 1221q20 50 58 88t88 58q29 11 71.5 18.5t103 10t96.5 3t105.5 0t76.5-.5t76.5.5t105.5 0t96.5-3t103-10t71.5-18.5q50-20 88-58t58-88q11-29 18.5-71.5t10-103t3-96.5t0-105.5t-.5-76.5t.5-76.5t0-105.5t-3-96.5t-10-103T1367 315q-20-50-58-88t-88-58q-29-11-71.5-18.5t-103-10t-96.5-3t-105.5 0t-76.5.5m768 630q0 229-5 317q-10 208-124 322t-322 124q-88 5-317 5t-317-5q-208-10-322-124T5 1085q-5-88-5-317t5-317q10-208 124-322T451 5q88-5 317-5t317 5q208 10 322 124t124 322q5 88 5 317'/%3E%3C/svg%3E");

  --tiktok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121 121 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14Z'/%3E%3C/svg%3E");

  --youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1280'%3E%3Cpath d='m711 872l484-250l-484-253zM896 10q168 0 324.5 4.5T1450 24l73 4q1 0 17 1.5t23 3t23.5 4.5t28.5 8t28 13t31 19.5t29 26.5q6 6 15.5 18.5t29 58.5t26.5 101q8 64 12.5 136.5T1792 532v176q1 145-18 290q-7 55-25 99.5t-32 61.5l-14 17q-14 15-29 26.5t-31 19t-28 12.5t-28.5 8t-24 4.5t-23 3t-16.5 1.5q-251 19-627 19q-207-2-359.5-6.5T336 1256l-49-4l-36-4q-36-5-54.5-10t-51-21t-56.5-41q-6-6-15.5-18.5t-29-58.5T18 998q-8-64-12.5-136.5T0 748V572q-1-145 18-290q7-55 25-99.5T75 121l14-17q14-15 29-26.5T149 58t28-13t28.5-8t23.5-4.5t23-3t17-1.5q251-18 627-18'/%3E%3C/svg%3E");

  --facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256c0 120 82.7 220.8 194.2 248.5V334.2h-52.8V256h52.8v-33.7c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287v175.9C413.8 494.8 512 386.9 512 256'/%3E%3C/svg%3E");

  --arrowright: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h306.7L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");

  --location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath stroke='currentcolor' stroke-width='2' fill='none' d='M17 9c0 6.5-8 12-8 12s-8-5.5-8-12a8 8 0 1 1 16 0Z'/%3E%3Cpath d='M11 8.5a1 1 0 1 1-4 0a1 1 0 0 1 4 0Z'/%3E%3C/svg%3E");

  --clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M464 256a208 208 0 1 1-416 0a208 208 0 1 1 416 0M0 256a256 256 0 1 0 512 0a256 256 0 1 0-512 0m232-136v136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24'/%3E%3C/svg%3E");

  --calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect width='464' height='390' x='24' y='98' fill='none' stroke='currentcolor' stroke-linejoin='round' stroke-width='48' rx='48'/%3E%3Cpath fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M110 24v50m290-50v50m80 125H36'/%3E%3C/svg%3E");

  --people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg fill='none'%3E%3Ccircle cx='12' cy='8' r='3' stroke='currentColor' stroke-linecap='round' stroke-width='2'/%3E%3Cpath stroke='currentColor' stroke-width='2' d='M15.268 8a2 2 0 1 1 3.464 2a2 2 0 0 1-3.464-2Zm-10 0a2 2 0 1 1 3.464 2a2 2 0 0 1-3.464-2Z'/%3E%3Cpath fill='currentColor' d='m16.882 18l-.98.197l.16.803h.82zm3.838-1.096l.943-.334zm-5.94-2.193l-.604-.797l-1.157.879l1.234.767zM19.868 17h-2.985v2h2.985zm-.09.238a.2.2 0 0 1-.005-.103a.2.2 0 0 1 .043-.097c.032-.04.059-.038.052-.038v2c1.146 0 2.274-1.08 1.796-2.43zM17 15c1.642 0 2.403 1.181 2.778 2.238l1.885-.668C21.198 15.259 19.948 13 17 13zm-1.614.507C15.77 15.215 16.282 15 17 15v-2c-1.162 0-2.097.362-2.824.914zm-1.133.053c1.039.646 1.474 1.772 1.648 2.637l1.96-.394c-.217-1.083-.824-2.867-2.552-3.942zm-5.033-.85l.527.85l1.234-.767l-1.157-.879zm-5.94 2.194l.942.334zM7.118 18v1h.819l.162-.803zM7 15c.718 0 1.23.215 1.614.507l1.21-1.593C9.097 13.362 8.162 13 7 13zm-2.778 2.238C4.597 16.181 5.358 15 7 15v-2c-2.948 0-4.198 2.259-4.663 3.57zM4.132 17c-.006 0 .02-.002.053.038a.2.2 0 0 1 .042.097a.2.2 0 0 1-.005.103l-1.885-.668C1.86 17.92 2.987 19 4.133 19zm2.986 0H4.133v2h2.985zm.98 1.197c.175-.865.61-1.991 1.65-2.637l-1.058-1.7c-1.728 1.075-2.335 2.86-2.553 3.942z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M12 14c3.572 0 4.592 2.551 4.883 4.009c.109.541-.33.991-.883.991H8c-.552 0-.992-.45-.883-.991C7.408 16.55 8.428 14 12 14Z'/%3E%3C/g%3E%3C/svg%3E");

  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 14.2L2.8 10l-1.4 1.4L7 17L19 5l-1.4-1.4z'/%3E%3C/svg%3E");

  --shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.5 1.5 21 21'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='m8.67 10.909l1.875 1.874a.71.71 0 0 0 1.008 0l3.777-3.777'/%3E%3Cpath d='M20.672 11.89V6.61a1.93 1.93 0 0 0-1.32-1.831L14.438 3.14a7.8 7.8 0 0 0-4.876 0L4.648 4.778a1.93 1.93 0 0 0-1.32 1.83v5.28a7.71 7.71 0 0 0 3.603 6.524l4.048 2.544a1.93 1.93 0 0 0 2.042 0l4.047-2.544a7.71 7.71 0 0 0 3.604-6.523'/%3E%3C/g%3E%3C/svg%3E");

  --email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z'/%3E%3C/svg%3E");

  --phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 22 22'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233a14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");

  --attention: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.7 1.7 20.6 20.6'%3E%3Cg fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='1'%3E%3Ccircle cx='12' cy='12' r='9' stroke-linecap='round' stroke-width='2.5'/%3E%3Cpath stroke-width='3.75' d='M12 16h.01v.01H12z'/%3E%3Cpath stroke-linecap='round' stroke-width='2.5' d='M12 12V8'/%3E%3C/g%3E%3C/svg%3E");
}

HTML { scroll-behavior: smooth; }

BODY {
  margin: 0; padding: 0; background-color: var(--white); color: var(--black);
  font-family: "Inter", sans-serif; font-weight: 400; font-size: 1.125rem;
  line-height: 1; letter-spacing: 3%;
}

IMG { border: 0; max-width: 100%; height: auto; }

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

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

  &.button {
    display: inline-block; border-radius: 0; border: 0.125rem solid var(--orange);
    box-sizing: border-box; padding: 0.916em 1.7em; background: var(--orange);
    color: var(--white); font-weight: 700; font-size: 1.125rem; line-height: 1;
    letter-spacing: 3%; text-align: center; text-transform: uppercase;

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

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

  &.arrow {
    display: flex; align-items: center; gap: 0 0.5em;
    color: var(--black); font-weight: 700; text-transform: uppercase;

    &:after {
      content: ''; height: 1em; width: 1.26em; background: var(--orange);
      mask: var(--arrowright) no-repeat center;
    }

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

H1, H2, H3 {
  margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; line-height: 1;
}

UL, OL { margin: 0 0 0 0.5em; padding: 0 0 0 0.5em; }

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

.site-width {
  width: var(--site-width); margin: 0 auto;
  @media (max-width: 1290px) { & { width: 96%; } }
}

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

/* HEADER */
HEADER {
  position: sticky; top: 0; z-index: 9999; background: var(--black);

  @media (max-width: 750px) { & { position: relative; } }

  SECTION { display: flex; justify-content: space-between; align-items: center; }
}

#logo { margin: 19.72px 0; line-height: 1; IMG { width: 300px; } }

#toggle-menu {
  display: none;

  + LABEL {
    position: relative; display: none; cursor: pointer;
    width: var(--toggle-width); height: var(--toggle-height);
    background: linear-gradient(transparent, transparent calc(var(--toggle-height) / 2 - (var(--toggle-bar-height) / 2)), var(--toggle-color) var(--toggle-bar-height), var(--toggle-color) calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent); transition: all 0.3s ease-in-out;

    @media (max-width: 900px) { & { display: block; margin-left: auto; } }

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

    &:after { top: calc(50% + (var(--toggle-bar-height) * 1.5)); }

    + NAV {
      @media (max-width: 900px) { & {
        position: absolute; top: -9999999px; left: 0; width: 100%;
        background: var(--black);
      } }

      UL {
        display: flex; justify-content: flex-end; gap: 0.6em 1.85em; margin: 0;
        padding: 0; list-style-type: none; font-family: "Bebas Neue", sans-serif; 
        font-size: 1.25rem; line-height: 1;

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

        @media (max-width: 900px) { & {
          flex-direction: column; padding-bottom: 1.2em; font-size: 1.25rem;
          line-height: 1; text-align: center;
        } }

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

        LI {
          position: relative;

          @media (min-width: 901px) {
            &:has(UL) > A {
              display: flex; justify-content: center; align-items: center;

              &:after {
                content: ''; height: 0.85em; aspect-ratio: 1; margin-left: 0.1em;
                background: var(--white); transition: all 0.2s;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z'/%3E%3C/svg%3E") no-repeat center;
              }

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

          &:hover A { color: var(--orange); }
          &:hover > A:after { background: var(--orange); }

          A {
            color: var(--white); &:hover { color: var(--orange); }
            white-space: nowrap;
          }
        }

        UL {
          display: none; flex-direction: column; gap: 0;
          position: absolute; top: 100%; left: 0; padding-top: 0.5em;
          font-family: "Inter", sans-serif; font-weight: 600; font-size: 90%;
          text-transform: none; box-shadow: 0 0.25rem 0.25rem 0 rgba(0,0,0,0.25);

          @media (min-width: 901px) {
            LI:hover & { display: block; }

            &:before {
              content: ''; display: block; width: 31px; height: 15px;
              translate: 1rem 0; background: var(--white);
              clip-path: polygon(50% 0, 100% 100%, 0 100%);
            }
          }

          @media (max-width: 900px) { & {
            display: flex; position: static; padding: 0; box-shadow: none;
          } }

          @media (max-width: 750px) { & { font-size: 60%; line-height: 1.1; } }

          LI {
            @media (min-width: 901px) {
              background: var(--white);
              &:first-of-type { padding-top: 0.6em; }
              &:last-of-type { padding-bottom: 0.6em; }
            }

            A {
              display: block; padding: 0.6em 1.38em; white-space: nowrap;
              color: var(--black);

              @media (max-width: 900px) { & {
                color: var(--white); &:hover { color: var(--orange); }
                white-space: wrap;
              } }

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

                @media (max-width: 900px) { & {
                  color: var(--white); &:hover { color: var(--orange); }
                } }
              }
            }
          }
        }
      }
    }
  }

  &:checked + LABEL {
    background: transparent;

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

    &:after { rotate: -45deg; }

    + NAV { top: 100%; }
  }
}

/* FOOTER */
FOOTER {
  padding-top: 3.25rem; background: var(--black); color: var(--white);

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

  H2 { margin-bottom: 0.5em; font-size: 133.33%; }

  .site-width {
    display: flex; justify-content: space-between; gap: 3rem 0; line-height: 1.4;

    @media (max-width: 900px) { & { flex-wrap: wrap; } }

    #footer-col1 {
      width: 34.1129%; box-sizing: border-box; padding-right: 3.2258%;
      border-right: 2px solid var(--lightblack);

      @media (max-width: 900px) { & { width: 100%; border-right: 0; padding-right: 0; } }

      #footer-logo {
        display: inline-block; margin: 0 0 1.5rem; line-height: 1;
        IMG { width: 300px; }
      }

      .social {
        margin-top: 1.5rem;
        A { background: var(--white); &:hover { background: var(--orange); } }
      }
    }

    NAV {
      flex-grow: 2; box-sizing: border-box; padding: 0 3.2258%;
      border-right: 2px solid var(--lightblack);

      @media (max-width: 700px) { & {
        flex-grow: 0; width: 50%;

        &:first-of-type { padding: 0; }
        &:last-of-type { border-right: 0; padding-left: 2rem; padding-right: 0; }
      } }

      UL {
        margin: 0; padding: 0; list-style-type: none; line-height: 1.1;

        LI { padding: 0.5em 0; }
      }
    }

    #form-subscribe {
      width: 30.9677%; box-sizing: border-box; padding-left: 3.2258%;

      @media (max-width: 900px) { & { width: 40%; } }
      @media (max-width: 700px) { & { width: 100%; padding-left: 0; } }

      INPUT {
        margin: 1.5rem 0 0.875rem; border: 0; border-radius: 0;
        background: var(--lightblack); color: var(--white); font-weight: 700;
      }

      #mlsubmit { width: 100%; }
    }
  }

  #copyright {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5em;
    margin-top: 2em; border-top: 0.125rem solid var(--lightblack);
    padding: 1.4444em 2%; color: var(--gray);

    @media (max-width: 950px) { & { flex-direction: column-reverse; text-align: center; } }

    UL {
      display: flex; justify-content: flex-end; align-items: center;
      margin: 0; padding: 0; list-style-type: none; line-height: 1;

      LI {
        border-left: 0.09375rem solid var(--gray); padding: 0 0.5em;

        &:first-of-type { border-left: 0; padding-left: 0; }
        &:last-of-type { padding-right: 0; }

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

/* MULTIPLE PAGES */
#page-header {
  padding: 3rem 0; background: var(--darkwhite); text-transform: uppercase;
  H1 { margin: 0 auto; font-size: 3rem; font-family: "Anton", sans-serif; }
}

#page-content { padding: 2.5rem 0; }

.social {
  display: flex; align-items: center; gap: 1rem 2rem;

  A {
    height: 37px; width: 37px; background: var(--orange);
    mask-repeat: no-repeat; mask-position: center;

    &.instagram { mask-image: var(--instagram); }
    &.tiktok { mask-image: var(--tiktok); }
    &.youtube { mask-image: var(--youtube); }
    &.facebook { mask-image: var(--facebook); }

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

.header {
  margin-bottom: 0.7em; color: var(--orange); font-size: 1.25rem; line-height: 1;
  letter-spacing: 3%; font-family: "Bebas Neue", sans-serif;
  text-transform: uppercase;
}

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

  LABEL { font-weight: 500; SPAN { color: var(--orange); } }

  INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
  TEXTAREA, SELECT {
    width: 100%; box-sizing: border-box; margin: 0.625em 0 1.875em; outline: 0;
    border: 0.0625rem solid var(--gray); border-radius: 0.3125rem;
    padding: 16px 17px; background: transparent; color: var(--black);
    font-family: "Inter", sans-serif; font-size: 1.125rem; line-height: 1;
    letter-spacing: 3%; -webkit-appearance: none; appearance: none;

    &:is(TEXTAREA) { height: 10rem; }

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

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

    &.alert {
      border-color: var(--orange) !important;

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

  INPUT[type="checkbox"],
  INPUT[type="radio"] { accent-color: var(--black); margin: 0.2em 0.25em 0 0; }

  .checkbox {
    display: flex; align-items: flex-start; gap: 0.25em; padding-bottom: 1.5em;
  }

  .radio {
    padding-bottom: 1.5em; font-family: "Poppins", sans-serif; font-weight: 500;

    .col2 & {
      width: 48%;

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

    LABEL { display: inline-block; padding-top: 0.5em; }
  }

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

    LABEL {
      width: 48%;

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

  BUTTON, INPUT[type="submit"] {
    display: inline-block; outline: 0; border: 0.125rem solid var(--orange);
    border-radius: 0; box-sizing: border-box; padding: 0.916em 1.7em;
    background: var(--orange); color: var(--white); font-weight: 700;
    font-size: 1.125rem; line-height: 1; letter-spacing: 3%; text-align: center;
    text-transform: uppercase; cursor: pointer; transition: all 0.2s;

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

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

      &:before {
        --loader-size: 2.5rem; animation: spin 1s linear infinite;
        content: ""; position: absolute; top: 0.25rem; box-sizing: border-box;
        left: calc(50% - (var(--loader-size) / 2)); width: var(--loader-size);
        height: var(--loader-size); border-radius: 50%;
        border: 0.1875rem solid var(--white); border-top-color: var(--darkgreen);
      }
    }
  }
}

@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(--green); color: var(--white);font-size: 1rem; line-height: 1;

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

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

/* HOME */
#home-slider {
  margin: 0; overflow: hidden; height: auto; line-height: 1; letter-spacing: 3%;

  .f-carousel__slide {
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; gap: 3.5rem 0; min-height: 698px; box-sizing: border-box;
    background-repeat: no-repeat; background-position: right center;
    background-size: contain;

    @media (max-width: 1130px) { & { background-size: cover; } }

    &:before {
      content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit;
      background: linear-gradient(to right, var(--darkwhite) 0, var(--darkwhite) 24%, transparent);
    }

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

      > DIV {
        width: 540px;

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

        .slide-header {
          margin-bottom: 0.7em; color: var(--orange); font-size: 111.111%;
          font-family: "Bebas Neue", sans-serif; text-transform: uppercase;
        }

        H1 {
          margin-bottom: 0.25em; font-family: "Anton", sans-serif;
          font-size: 533.333%; text-transform: uppercase;

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

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

        P { margin: 0 0 1.5em; line-height: 1.5; }

        .buttons {
          display: flex; gap: 1rem 1.5rem;

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

  .f-button {
    &.is-arrow {
      --f-button-border-radius: 50%;
      --f-button-width: 48px; --f-button-height: 48px;
      --f-button-bg: var(--white); --f-button-hover-bg: var(--orange);
      --f-button-color: var(--orange); --f-button-hover-color: var(--white);
      inset: auto; right: calc((100% - var(--site-width)) / 2); bottom: 44px;
      transform: none;

      @media (max-width: 1290px) { & { right: 2%; } }
      @media (max-width: 750px) { & { display: none; } }

      &.is-prev { display: none; }
    }
  }

  .f-carousel__dots {
    justify-content: flex-end; align-items: center; inset: auto; top: auto;
    bottom: 44px; right: calc(((100% - var(--site-width)) / 2) + 74px); z-index: 2;
    height: 48px; --f-carousel-dots-gap: 16px;

    @media (max-width: 1290px) { & { right: calc(2% + 74px); } }
    @media (max-width: 750px) { & {
      justify-content: center; align-items: flex-start;
      bottom: -18px; right: 0; left: 0;
    } }
    
    .f-carousel__dot {
      --f-carousel-dot-width: 14px; --f-carousel-dot-height: 14px;
      --f-carousel-dot-bg: var(--white); --f-carousel-dot-hover-bg: var(--orange);
      --f-carousel-dot-selected-bg: var(--orange);
      --f-carousel-dot-opacity: 1; --f-carousel-dot-hover-opacity: 1;

      &:after { box-shadow: 0 0 0.25rem 0 rgba(0,0,0,0.25); }
    }
  }
}

#home-content {
  display: flex; align-items: flex-start; gap: 3rem 0; padding: 5rem 0;

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

  .wp-post-image {
    width: 44%;

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

  .text {
    width: 610px; margin-left: 7.6944%; box-sizing: border-box; letter-spacing: 3%;

    @media (max-width: 1290px) { & {
      width: 49.5%; margin-left: 3.5%; padding-right: 2%;
    } }
    @media (max-width: 900px) { & { width: 96%; margin-left: 0; padding-left: 2%; } }

    H2 { font-size: 311.111%; margin-bottom: 0.25em; }

    P {
      margin: 0 0 1.5em; line-height: 1.5;

      &:has(.button) { margin: 0; }
    }
  }
}

#home-classes {
  background: var(--darkwhite); padding: 4rem 0 2.25rem;

  .site-width {
    display: flex; flex-wrap: wrap; gap: 0 1.613%;

    @media (max-width: 900px) { & { gap: 0 4%; } }
    @media (max-width: 650px) { & { gap: 0; } }

    .header { margin: 0; }

    > A.arrow { margin-left: auto; }

    H2 {
      width: 100%; margin: 0.25em 0 0.5em; font-size: 311.111%;
      text-transform: uppercase;
    }

    .home-class {
      width: 32.258%; margin-bottom: 1.75rem; background: var(--white);
      box-shadow: 0 0.25rem 0.25rem 0 rgba(0,0,0,0.25);

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

      .image {
        aspect-ratio: 400 / 216; background-repeat: no-repeat;
        background-position: center; background-size: cover;
      }

      .text {
        box-sizing: border-box; padding: 1.4375rem; line-height: 1.5;

        H3 {
          margin: 0 0 0.4em; font-family: "Inter", sans-serif; font-weight: 700;
          font-size: 144.444%; line-height: 1.1; letter-spacing: 3%;
          text-transform: none;
        }

        H4 {
          margin: 0 0 1em; color: var(--orange); font-weight: 700;
          font-size: 83.3333%; line-height: 1; letter-spacing: 3%;
        }

        .arrow { margin-top: 0.8em; }
      }
    }
  }
}

#socials {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.75em 3em; padding: 5rem 0 3rem;

  H2 { font-size: 2rem; padding-top: 0.15em; }

  .social:before {
    content: "Follow Us"; font-family: "Bebas Neue", sans-serif; font-size: 2rem;
    padding-top: 0.15em;
  }
}

#home-prefooter {
  display: flex; flex-direction: column; justify-content: center; min-height: 440px;
  box-sizing: border-box; padding: 1.5em 0; background-repeat: no-repeat;
  background-position: right center; background-size: auto 100%; position: relative;

  @media (max-width: 1100px) { & { background-position: left 20vw center; } }
  @media (max-width: 640px) { & { background-position: left -10vw center; } }

  &:before {
    content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit;
    background: linear-gradient(to right, #E2E0E0 0, #E2E0E0 21%, transparent 79%);
  }

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

    > DIV {
      width: 610px; line-height: 1.5;

      text-shadow: 0 0 5px #E2E0E0;

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

      H2 {
        margin-bottom: 0.4em; font-size: 311.111%; text-shadow: none;

        @media (max-width: 640px) { & { margin-bottom: 3vw; } }

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

      .buttons {
        display: flex; gap: 1rem 1.5rem; margin-top: 2em; text-shadow: none;

        @media (max-width: 640px) { & { flex-direction: column; margin-top: 5vw; } }
      }
    }
  }
}

/* CLASS */
#class-header {
  padding: 3rem 0; background: var(--darkwhite); text-transform: uppercase;

  NAV A {
    display: inline-flex; align-items: center; gap: 0 0.5em; color: var(--black);
    font-weight: 700; font-size: 1rem;
    
    &:hover { color: var(--orange); }

    &:before {
      content: ''; height: 1em; width: 1.26em; background: var(--orange);
      mask: var(--arrowright) no-repeat center; rotate: 180deg;
    }
  }

  > DIV {
    color: var(--orange); font-family: "Bebas Neue", sans-serif; font-size: 1.25rem;
    padding: 0 0 0.2em;
  }

  H1 { margin: 0 auto; font-size: 3rem; font-family: "Anton", sans-serif; }
}

#class-subheader {
  background: linear-gradient(var(--darkwhite) 3.375rem, transparent 3.375rem);
  padding-bottom: 1.5rem;

  .site-width {
    display: flex; box-sizing: border-box; padding: 1.4444em 0;
    background: var(--lightwhite);

    @media (max-width: 800px) { & { flex-direction: column; padding: 1.4444em 2%; } }

    > DIV {
      display: flex; align-items: center; box-sizing: border-box;
      border-left: 1px solid var(--gray); padding: 0 4%; line-height: 1.6;

      &:first-of-type { border-left: 0; }

      @media (max-width: 800px) { & {
        border-left: 0; border-top: 1px solid var(--gray); padding: 1.4em 0;
        &:first-of-type { border-top: 0; }
      } }

      @media (min-width: 801px) { &.location { width: 41%; } }
      @media (min-width: 801px) { &.size { width: 32%; } }
      @media (min-width: 801px) { &.duration { width: 27%; } }

      &:before {
        content: ''; display: flex; width: 70px; height: 50px;
        background: var(--orange); mask-repeat: no-repeat;
        mask-position: left center;
      }

      @media (max-width: 800px) { &:before {
        mask-position: center; margin-right: 1rem;
      } }

      &.location:before { mask-image: var(--location); }
      &.size:before { height: 70px; margin-right: 1rem; mask-image: var(--people); }
      &.duration:before { mask-image: var(--clock); }

      > DIV {
        width: calc(100% - 70px);

        P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }
      }

      H2 {
        margin-bottom: 0.5em; font-family: "Inter", sans-serif; font-weight: 700;
        font-size: 0.8333em; text-transform: uppercase;
      }
    }
  }
}

#course-description {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 3.5rem 0; line-height: 1.6;

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

  H2 { margin-bottom: 0.25em; font-size: 3.5rem; }

  P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }

  IMG {
    flex-shrink: 0; width: 50.887%; height: auto; margin-left: 8%;

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

#course-outcomes {
  border-top: 1px solid var(--gray); padding: 3.5rem 0;

  H2 { margin-bottom: 0.25em; font-size: 3.5rem; }

  P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }

  UL {
    margin: 0; padding: 0; list-style-type: none; columns: 2;

    @media (max-width: 700px) { & { columns: 1; } }

    LI {
      display: flex; align-items: center; gap: 0 0.5em; padding-top: 1em;

      &:before {
        content: ''; height: 0.75em; aspect-ratio: 1; background: var(--orange);
        mask: var(--check) no-repeat center;
      }
    }
  }
}

#course-twocol {
  display: flex; border-top: 1px solid var(--gray); padding: 3.5rem 0;
  line-height: 1.6;

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

  P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }

  &.twocol > DIV {
    box-sizing: border-box;

    @media (min-width: 701px) { width: 50%; }

    &:first-of-type {
      @media (min-width: 701px) { & { padding-right: 4rem; } }
      @media (max-width: 700px) { & { padding-bottom: 3.5rem; } }
    }

    &:last-of-type {
      @media (min-width: 701px) { & { border-left: 1px solid var(--gray); padding-left: 4rem; } }
      @media (max-width: 700px) { & { border-top: 1px solid var(--gray); padding-top: 3.5rem; } }
    }
  }

  H2 { margin-bottom: 0.25em; font-size: 3.5rem; }
}

#course-evaluation {
  border-top: 1px solid var(--gray); padding: 3.5rem 0; line-height: 1.6;

  H2 { margin-bottom: 0.25em; font-size: 3.5rem; }

  P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }
}

#upcoming-classes {
  padding: 1.5rem 0 3rem; &.archive { padding: 3rem 0; }

  H1, H2 { margin-bottom: 0.25em; font-size: 3.5rem; }
}

TABLE.upcoming-classes {
  table-layout: fixed; width: 100%; border-collapse: collapse;
  box-sizing: border-box; text-align: left;

  @media (max-width: 1000px) { & { font-size: 1.8vw; } }
  @media (max-width: 700px) { & { font-size: 1.125rem; } }

  THEAD {
    @media (max-width: 700px) { & { display: none; } }

    TR {
      border-block: 1px solid var(--gray);
      background: var(--darkwhite); color: var(--orange); font-size: 0.8333em;
      text-transform: uppercase;

      TH {
        padding: 1.4666em 0;

        &.class { width: 20%; padding: 1.4666em 1em; }

        &.icon { width: 3.5333em; }
      }
    }
  }

  TBODY {
    TR {
      border-block-end: 1px solid var(--gray);

      @media (max-width: 700px) { & {
        display: flex; flex-wrap: wrap; margin-top: 1em;
      } }

      TD {
        padding: 0.8333em 0;

        @media (max-width: 700px) { & { width: calc(100% - 2.3888em); } }

        &.class {
          width: 20%; padding: 0.8333em;

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

        &.icon {
          width: 2.9444em; padding: 0.8333em 0.6111em 0.8333em 0.3333em;
          background: var(--orange); mask-repeat: no-repeat; mask-position: center;
          mask-size: 1.7777em;

          @media (max-width: 700px) { & {
            margin-right: 0.6111em; padding: 0.8333em 0; width: 1.7777em;
          } }
        }

        &.date { mask-image: var(--calendar); }
        &.location { mask-image: var(--location); }
        &.spots { mask-image: var(--people); }

        &.register {
          text-align: right;

          @media (max-width: 700px) { & {
            text-align: left; padding-bottom: 1.8333em;
          } }

          .button {
            font-size: inherit; padding: 0.666em 2.6em; white-space: nowrap;
            min-width: 194px;

            &.soldout {
              filter: grayscale(100%); opacity: 0.6; pointer-events: none;
            }
          }
        }
      }
    }
  }
}

#class-request {
  display: flex; justify-content: space-between; align-items: center; gap: 1em;
  width: 744px; box-sizing: border-box; margin: 0 auto 5rem; padding: 1.25rem 2rem;
  background: var(--lightwhite);

  @media (max-width: 774px) { & { width: 96%; } }
  @media (max-width: 600px) { & { flex-direction: column; text-align: center; } }

  STRONG {
    display: block; margin-bottom: 0.75em; font-size: 83.33%;
    text-transform: uppercase;
  }

  .button { white-space: nowrap; }
}

#registration-content {
  background: linear-gradient(var(--darkwhite) 3.375rem, transparent 3.375rem);
  padding-bottom: 5rem;

  > DIV {
    display: flex;

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

#registration-details {
  width: 57%; box-shadow: 0.25rem 0 0.25rem 0 rgba(0,0,0,0.25);
  position: relative; z-index: 2; box-sizing: border-box; padding: 2rem;
  background: var(--white);

  @media (max-width: 960px) { & { width: 52%; } }
  @media (max-width: 800px) { & { width: 50%; } }
  @media (max-width: 750px) { & { width: 100%; box-shadow: 0 0.25rem 0.25rem 0 rgba(0,0,0,0.25); } }

  H2 { font-size: 3.375rem; }

  .date, .location, .note, .cancelation {
    border-top: 1px solid var(--gray); padding: 2rem 0;

    &:first-of-type { border-top: 0; }
    &:last-of-type { padding-bottom: 0; }

    &:not(.cancelation) H3 {
      font-family: "Inter", sans-serif; font-weight: 700; font-size: 83.33%;
      text-transform: uppercase;
    }

    H4 { margin: 0.6em 0; font-size: 111.111%; }

    &:is(.date), &:is(.location), &:is(.note) {
      padding-left: 77px; position: relative;
      
      &:before {
        content: ''; height: 100%; width: 47px; position: absolute; inset: 0;
        background: var(--orange); mask: var(--calendar) no-repeat center;
      }

      &:is(.location):before { mask-image: var(--location); }
      &:is(.note):before { mask-image: var(--attention); }
    }

    &:is(.cancelation) {
      font-size: 1rem; line-height: 1.6;

      H3 {
        display: flex; align-items: center;
        margin-bottom: 0.6em; font-size: 2.5rem;

        &:before {
          content: ''; height: 1.175em; aspect-ratio: 1; margin-right: 0.75em;
          position: relative; top: -0.1em; background: var(--orange);
          mask: var(--shield-check) no-repeat center;
        }
      }
    }

    P {
      margin: 12px 0 1.25em; line-height: 1.6;
      &:last-of-type { margin-bottom: 0; }
    }
  }
}

#registration-summary {
  width: 43%; box-sizing: border-box; padding: 2rem 2rem 1rem;
  background: var(--lightwhite); font-weight: 700; text-transform: uppercase;

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

  H2 { font-size: 2.5rem; }

  .price {
    margin: 0.5em 0; font-family: "Bebas Neue", sans-serif; font-size: 4rem;
    font-weight: 400;

    SPAN { font-size: 31.25%; }
  }

  .attendee { margin-bottom: 0.2em; color: var(--orange); }

  FORM {
    margin-top: 2rem;

    .tkt-slctr-tbl-wrap-dv { margin: 0; font-size: 1em; }

    THEAD, .tckt-slctr-tbl-td-name, .tckt-slctr-tbl-td-price { display: none; }

    .tckt-slctr-tbl-td-qty {
      display: flex; justify-content: space-between; align-items: center;

      &:before { content: "Number of attendees "; }

      SELECT { margin: 0; width: 90px; }
    }

    .ticket-selector-submit-btn-wrap {
      float: none; width: 100%;

      INPUT[type="submit"] { width: 100%; }
    }
  }
}

#checkout-content {
  #spco-steps-big-hdr { color: transparent; font-size: 2.5rem; }

  #spco-steps-display-dv {
    justify-content: space-between; align-content: flex-start; flex-wrap: nowrap;
    gap: 0.5em 0; border: 0; padding: 0;

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

    .spco-step-display-dv {
      width: 48%;

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

      .spco-steps-display-hdr {
        width: 100%; font-size: 18px; font-weight: 500; letter-spacing: 3%;

        .spco-step-big-nmbr {
          display: flex; justify-content: center; align-items: center; width: 2rem;
          height: 2rem; border-radius: 50%; padding: 0; background: var(--gray);
          color: var(--white); font-family: "Bebas Neue", sans-serif;
          font-weight: 400; font-size: 20px; line-height: 1; margin-right: 0.5rem;
        }

        .spco-step-name { color: var(--black); }

        &:after {
          content: ''; flex-grow: 2; height: 1px; margin-left: 1em;
          background: var(--gray);
        }
      }

      &.active-step {
        .spco-steps-display-hdr:after { background: var(--orange); }
        .spco-step-big-nmbr { background: var(--orange); }
      }
    }

    .spco-step-arrow-dv { display: none; }
  }

  .spco-ticket-details, #spco-payment-info-table {
    border-collapse: collapse; border: 1px solid var(--gray);

    THEAD {
      TR {
        background: var(--darkwhite); text-transform: uppercase;

        TH {
          box-sizing: border-box; padding: 1em 1.5rem;
          &:first-of-type:before { content: "Class"; }
          &.ee-ticket-details-qty { text-align: center; }
        }
      }
    }

    TBODY {
      TR {
        background: transparent;

        TD {
          padding: 1rem 1.5rem;

          &.ee-ticket-details-name {
            font-size: 1.125rem;

            SPAN { display: none; }
          }

          &.ee-ticket-details-qty { text-align: center; }
        }
      }
    }
  }

  #spco-payment-info-table {
    THEAD TR TH:first-of-type {
      color: transparent; text-align: left;

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

    TBODY TR {
      TD.event-header { display: none; }
      TD:first-of-type SPAN { display: none; }
    }
  }

  .spco-step-dv .big-event-title-hdr { display: none; }

  LEGEND {
    color: var(--black); font-family: "Bebas Neue", sans-serif; font-size: 30px;
    margin-bottom: 0.5em;
  }

  .ee-reg-form-qstn-grp-dv {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    margin: 0; padding: 0;

    H4 { width: 100%; }

    > DIV {
      width: 49%; margin-block-end: 0; padding: 0 0 1.25em;

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

      &.ee-reg-qstn-12-input-dv,
      &.ee-reg-qstn-address-input-dv,
      &.ee-reg-qstn-address2-input-dv {
        width: 100%;
      }

      &.ee-reg-qstn-city-input-dv,
      &.ee-reg-qstn-state-input-dv,
      &.ee-reg-qstn-zip-input-dv {
        width: 32%;
        @media (max-width: 700px) { & { width: 100%; } }
      }

      &#new_state_micro_form { display: none; }

      INPUT, SELECT { width: 100%; margin: 0.25em 0; min-height: 0 !important; }
    }
  }
}

#checkout-thankyou { padding: 3rem 0; }

/* ABOUT */
#about-content {
  padding: 3.5rem 0; background-repeat: no-repeat;
  background-position: right center; background-size: auto 100%;
  
  @media (901px <= width <= 1290px) { & { background-position: left 48vw center; } }

  .text {
    width: var(--site-width); box-sizing: border-box;
    margin-left: calc((100% - var(--site-width)) / 2);
    font-size: 1rem; line-height: 1.6;

    @media (max-width: 2100px) { & { width: 59%; } }
    @media (max-width: 1500px) { & { width: 48%; } }
    @media (max-width: 1290px) { & { margin-left: 2%; } }
    @media (max-width: 900px) { & {
      width: 100%; margin: 0; padding: 1em 2% 0.1em;
      background-color: rgba(255,255,255,0.8);
    } }

    H2 { font-size: 3.5rem; }
  }
}

#about-events {
  scroll-margin-top: 7.125rem; padding: 3rem 0; background: var(--darkwhite);
  font-size: 1rem; line-height: 1.6;

  .site-width {
    display: flex; justify-content: space-between;

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

    H2 { margin-bottom: 0.4em; font-size: 3.5rem; }
    H3 { color: var(--orange); font-size: 2rem; }

    .content {
      width: 41%;

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

    .events {
      width: 55%; box-sizing: border-box; border-left: 0.125rem solid var(--orange);
      padding-left: 4%;

      @media (max-width: 950px) { & { width: 60%; } }
      @media (max-width: 750px) { & {
        width: 100%; margin-top: 1.5em; border-left: 0; padding: 2em 0 0;
        border-top: 0.125rem solid var(--orange);
      } }

      > DIV {
        display: flex; justify-content: space-between; align-items: center;
        border-top: 1px solid var(--gray); padding: 1.25rem 0;

        &:first-of-type { padding-top: 0; border-top: 0; }
        &:last-of-type { padding-bottom: 0; }

        .button { white-space: nowrap; }
      }
    }
  }
}

#about-staff {
  scroll-margin-top: 7.125rem; padding: 3rem 0;

  H2 { margin-bottom: 0.4em; font-size: 3.5rem; text-align: center; }

  .site-width {
    display: flex; flex-wrap: wrap; gap: 1.25rem;

    > DIV {
      width: calc(50% - 0.625rem); min-height: 360px;
      display: flex; justify-content: space-between;
      box-shadow: 0.25rem 0.25rem 0.25rem 0 rgba(0,0,0,0.25);

      @media (max-width: 1000px) { & { flex-direction: column-reverse; } }
      @media (max-width: 700px) { & { width: 100%; min-height: 0; } }

      .image {
        width: 31%; height: 100%; position: relative;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 16 16'%3E%3Cpath fill='%23BFBFBF' d='M9.175 10.825Q8 9.65 8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12t-2.825-1.175M4 20v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20z'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: center;
        background-size: 160% auto;

        &.has-image { background-size: cover; }

        @media (max-width: 1000px) { & {
          width: 100%; height: auto; aspect-ratio: 1;
          background-position: bottom center; background-size: auto 90%;

          &.has-image { background-position: center; }
        } }

        &:before {
          content: ''; position: absolute; z-index: -1; inset: 0;
          background: linear-gradient(var(--darkwhite) 60%, var(--gray) 60%);
        }

        @media (max-width: 1000px) { &:before { background: var(--darkwhite); } }
      }

      .text {
        width: 69%;
        box-sizing: border-box; padding: 2rem;
        font-size: 1rem; line-height: 1.6;

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

        H3 {
          font-family: "Inter", sans-serif; font-weight: 700; font-size: 1.625rem;
          line-height: 1;
        }

        H4 {
          margin: 0.5em 0 0; color: var(--orange); font-size: 0.9375rem;
          line-height: 1; text-transform: uppercase;
        }

        P:last-of-type { margin-bottom: 0; }

        .more-text {
          overflow: hidden; max-height: 1000px; opacity: 1;
          transition: max-height 0.5s ease-out, opacity 0.7s ease-out;
          &.collapsed { max-height: 0; opacity: 0; }
        }

        BUTTON {
          display: inline-block; outline: 0; border: 0.125rem solid var(--orange);
          border-radius: 0; box-sizing: border-box; padding: 0.7em 1.4em;
          background: var(--orange); color: var(--white); font-weight: 700;
          font-size: 0.75em; line-height: 1; letter-spacing: 3%; text-align: center;
          text-transform: uppercase; cursor: pointer; transition: all 0.2s;
          margin-top: 1em;

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

#about-gallery {
  scroll-margin-top: 7.125rem; padding: 3rem 0;

  H2 { margin-bottom: 0.4em; font-size: 3.5rem; text-align: center; }

  .site-width {
    display: flex; flex-wrap: wrap; gap: 1.25rem 1.6129%;

    @media (max-width: 1290px) { & { gap: 1.55vw 1.6129%; } }
    @media (max-width: 750px) { & { gap: 3.285vw 3.5%; } }
    @media (max-width: 600px) { & { gap: 4vw 4%; } }

    A {
      width: 23.7903%; aspect-ratio: 295 / 377;
      background-repeat: no-repeat; background-position: center;
      background-size: cover;

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

/* CONTACT */
#contact-content {
  padding: 2.5rem 0;

  .col2 {
    display: flex; justify-content: space-between; gap: 2rem; padding: 2rem 0;

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

    H2 { margin-bottom: 0.57em; font-size: 3.5rem; }

    #contact-forms {
      width: 66%; box-sizing: border-box;

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

      DETAILS {
        margin-top: 2rem; border-top: 1px solid var(--gray); padding-top: 2rem;

        &:first-of-type { margin: 0; border: 0; padding: 0; }

        SUMMARY {
          display: flex; justify-content: space-between; align-items: center;
          list-style: none; cursor: pointer; font-size: 3.5rem; line-height: 1;
          font-family: "Bebas Neue", sans-serif;

          &:after { content: '\002B'; color: var(--orange); font-size: 120%; }
        }

        &[open] SUMMARY:after { content: '\2212'; }
      }

      FORM {
        padding: 1.5em 0;

        .names {
          display: flex; justify-content: space-between; flex-wrap: wrap;

          LABEL {
            width: 48%;

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

        .city-state {
          display: flex; justify-content: space-between; flex-wrap: wrap;

          LABEL {
            width: 30%; &:first-of-type { width: 66%; }

            @media (max-width: 1100px) { & {
              width: 43%; &:first-of-type { width: 53%; }
            } }

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

    #contact-sidebar {
      width: 339px;

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

      .contact-sidebar {
        padding: 0 0 1.4em 2.2em; position: relative;

        &:before {
          content: ''; position: absolute; top: -0.2em; left: 0; height: 1.4em;
          width: 1.4em; background: var(--orange); mask-repeat: no-repeat;
          mask-position: center;
        }

        &.email:before { mask-image: var(--email); }
        &.phone:before { mask-image: var(--phone); }
        &.location:before { mask-image: var(--location); }

        STRONG { display: block; margin-bottom: 0.5em; text-transform: uppercase; }

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

      HR { margin: 1.5rem 0 3rem; }

      H3 { margin-bottom: 0.4em; font-size: 2.5rem; }

      TABLE {
        font-weight: 700; text-transform: uppercase;

        TD { padding: 0 0 0.25em; &:first-of-type { padding-right: 1em; } }
      }
    }
  }
}