/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/*
  5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

li {
  list-style: none;
}

ul, ol {
  padding: 0;
  margin: 0;
}

/*

  6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  text-decoration: none;
  color: currentColor;
}

/*
  8. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/*END RESET*/
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --clr-gold-900: hsl(42, 100%, 35%);
  --clr-gold-800: hsl(42, 100%, 42%);
  --clr-gold-700: hsl(42, 100%, 50%);
  --clr-gold-600: hsl(42, 95%, 58%);
  --clr-gold-500: hsl(42, 90%, 65%);
  --clr-gold-400: hsl(42, 85%, 72%);
  --clr-gold-300: hsl(42, 80%, 80%);
  --clr-gold-200: hsl(42, 75%, 88%);
  --clr-gold-100: hsl(42, 70%, 94%);
  --clr-rust-900: hsl(15, 80%, 25%);
  --clr-rust-800: hsl(15, 75%, 32%);
  --clr-rust-700: hsl(15, 70%, 40%);
  --clr-rust-600: hsl(15, 65%, 48%);
  --clr-rust-500: hsl(15, 60%, 55%);
  --clr-rust-400: hsl(15, 55%, 65%);
  --clr-rust-300: hsl(15, 50%, 72%);
  --clr-rust-200: hsl(15, 45%, 80%);
  --clr-rust-100: hsl(15, 40%, 88%);
  --clr-slate-900: hsl(210, 30%, 15%);
  --clr-slate-800: hsl(210, 25%, 22%);
  --clr-slate-700: hsl(210, 20%, 30%);
  --clr-slate-600: hsl(210, 20%, 38%);
  --clr-slate-500: hsl(210, 20%, 46%);
  --clr-slate-400: hsl(210, 15%, 60%);
  --clr-slate-300: hsl(210, 10%, 70%);
  --clr-slate-200: hsl(210, 10%, 82%);
  --clr-slate-100: hsl(210, 10%, 92%);
  --clr-gray-900: hsl(240, 4%, 10%);
  --clr-gray-800: hsl(240, 3%, 18%);
  --clr-gray-700: hsl(240, 2%, 26%);
  --clr-gray-600: hsl(240, 2%, 35%);
  --clr-gray-500: hsl(240, 1%, 44%);
  --clr-gray-400: hsl(240, 1%, 60%);
  --clr-gray-300: hsl(240, 1%, 75%);
  --clr-gray-200: hsl(240, 1%, 88%);
  --clr-gray-100: hsl(240, 1%, 95%);
  --clr-cream-900: hsl(40, 30%, 85%);
  --clr-cream-800: hsl(40, 30%, 88%);
  --clr-cream-700: hsl(40, 30%, 91%);
  --clr-cream-600: hsl(40, 30%, 94%);
  --clr-cream-500: hsl(40, 30%, 96%);
  --clr-cream-400: hsl(40, 30%, 97%);
  --clr-cream-300: hsl(40, 30%, 98%);
  --clr-cream-200: hsl(40, 30%, 99%);
  --clr-cream-100: hsl(40, 30%, 100%);
  --clr-cream-50: hsl(40, 100%, 99%);
  --clr-base-900: hsl(0, 0%, 6%);
  /***Color Palette**/
  --color-bg: var(--clr-base-900);
  --color-txt: var(--clr-cream-50);
  --btn-primary:var(--clr-gold-500);
  --divider-gradient:var(--gradient-base-to-gold);
  --color-highlight: var(--clr-gold-500);
  --link-default:var(--clr-gold-500);
  --link--pressed:var(--clr-gold-300);
  --gradient-gold-subtle: linear-gradient(to right, hsl(42, 70%, 94%), hsl(42, 80%, 80%));
  --gradient-gold-vibrant: linear-gradient(to right, hsl(42, 90%, 65%), hsl(42, 100%, 50%));
  --gradient-gold-deep: linear-gradient(to right, hsl(42, 100%, 50%), hsl(42, 100%, 35%));
  --gradient-gold-full-spectrum: linear-gradient(to right, hsl(42, 70%, 94%), hsl(42, 100%, 35%));
  --gradient-rust-subtle: linear-gradient(to right, hsl(15, 40%, 88%), hsl(15, 50%, 72%));
  --gradient-rust-vibrant: linear-gradient(to right, hsl(15, 60%, 55%), hsl(15, 70%, 40%));
  --gradient-rust-deep: linear-gradient(to right, hsl(15, 70%, 40%), hsl(15, 80%, 25%));
  --gradient-rust-full-spectrum: linear-gradient(to right, hsl(15, 40%, 88%), hsl(15, 80%, 25%));
  --gradient-slate-subtle: linear-gradient(to right, hsl(210, 10%, 92%), hsl(210, 10%, 70%));
  --gradient-slate-vibrant: linear-gradient(to right, hsl(210, 20%, 46%), hsl(210, 20%, 30%));
  --gradient-slate-deep: linear-gradient(to right, hsl(210, 20%, 30%), hsl(210, 30%, 15%));
  --gradient-slate-full-spectrum: linear-gradient(to right, hsl(210, 10%, 92%), hsl(210, 30%, 15%));
  --gradient-gray-subtle: linear-gradient(to right, hsl(240, 1%, 95%), hsl(240, 1%, 75%));
  --gradient-gray-vibrant: linear-gradient(to right, hsl(240, 1%, 44%), hsl(240, 2%, 26%));
  --gradient-gray-deep: linear-gradient(to right, hsl(240, 2%, 26%), hsl(240, 4%, 10%));
  --gradient-gray-full-spectrum: linear-gradient(to right, hsl(240, 1%, 95%), hsl(240, 4%, 10%));
  --gradient-cream-subtle: linear-gradient(to right, hsl(40, 30%, 100%), hsl(40, 30%, 98%));
  --gradient-cream-warm: linear-gradient(to right, hsl(40, 30%, 96%), hsl(40, 30%, 91%));
  --gradient-cream-rich: linear-gradient(to right, hsl(40, 30%, 91%), hsl(40, 30%, 85%));
  --gradient-cream-full-spectrum: linear-gradient(to right, hsl(40, 30%, 100%), hsl(40, 30%, 85%));
  --gradient-gold-to-rust: linear-gradient(to right, hsl(42, 90%, 65%), hsl(15, 65%, 48%));
  --gradient-rust-to-slate: linear-gradient(to right, hsl(15, 60%, 55%), hsl(210, 20%, 30%));
  --gradient-gold-to-cream: linear-gradient(to right, hsl(42, 80%, 80%), hsl(40, 30%, 100%));
  --gradient-rust-to-cream: linear-gradient(to right, hsl(15, 50%, 72%), hsl(40, 30%, 100%));
  --gradient-slate-to-cream: linear-gradient(to right, hsl(210, 10%, 70%), hsl(40, 30%, 100%));
  --gradient-base-to-gold: linear-gradient(90deg, hsl(0, 0%, 6%) 0%, hsl(42, 100%, 50%) 90%);
  /** Spacing variables **/
  --space-1: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
  --space-2: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
  --space-3: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
  --space-4: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
  --space-5: clamp(3rem, 2.38rem + 3.11vw, 5rem);
  --space-6: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
  --space-7: clamp(5rem, 3.82rem + 6.22vw, 10rem);
  --space-8: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
  /**Font Scale **/
  --step-0: clamp(0.53rem, 0.62rem - 0.15vw, 0.49rem);
  --step-1: clamp(0.83rem, 0.82rem + 0.08vw, 0.88rem);
  --step-2: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
  --step-3: clamp(1.2rem, 1.02rem + 0.88vw, 1.77rem);
  --step-4: clamp(1.44rem, 1.11rem + 1.65vw, 2.5rem);
  --step-5: clamp(1.73rem, 1.17rem + 2.8vw, 3.53rem);
  --step-6: clamp(2.07rem, 1.17rem + 4.54vw, 5rem);
  --step-7: clamp(2.49rem, 1.07rem + 7.11vw, 7.07rem);
  --step-8: clamp(2.99rem, 1.07rem + 9.96vw, 10rem);
  --step-9: clamp(3.59rem, 1.07rem + 13.96vw, 12.5rem);
  --step-10: clamp(4.31rem, 1.07rem + 20.04vw, 15.63rem);
  --step-11: clamp(5.18rem, 1.07rem + 29.18vw, 20.31rem);
  --step-12: clamp(6.22rem, 1.07rem + 42.06vw, 25.63rem);
  --step-13: clamp(7.46rem, 1.07rem + 60.56vw, 32.5rem);
  --step-14: clamp(8.96rem, 1.07rem + 87.09vw, 41.25rem);
  --step-15: clamp(10.75rem, 1.07rem + 126.64vw, 51.88rem);
  --step-16: clamp(12.89rem, 1.07rem + 184vw, 64.38rem);
  --fs-display-lvl-heading:var(--step-7);
  --fs-top-lvl-heading:var(--step-5);
  --fs-mid-lvl-heading:var(--step-4);
  --fs-sub-lvl-heading:var(--step-2);
  --fs-body:var(--step-2);
  /**SPACING**/
  --space-1: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
  --space-2: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
  --space-3: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
  --space-4: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
  --space-5: clamp(3rem, 2.38rem + 3.11vw, 5rem);
  --space-6: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
  --space-7: clamp(5rem, 3.82rem + 6.22vw, 10rem);
  --space-8: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Variable.woff2") format("woff2"), url("../fonts/Switzer-Variable.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Variable.woff2") format("woff2"), url("../fonts/Switzer-Variable.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gambarino";
  src: url("../fonts/Gambarino-regular.woff2") format("woff2"), url("../fonts/Gambarino-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.flow > *:where(:not(:last-child)) {
  margin-block-end: var(--flow-space, 0.2em);
}

.site_container {
  width: min(100vw - 2.5rem, 95rem);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.site_container--narrow {
  max-width: 80rem;
}

.site_container--padded {
  padding-inline: 1.5rem;
}

.global-padding {
  padding-inline: var(--space-3);
}

.grid_container {
  display: grid;
  place-content: center;
}
.grid_container--full-height {
  min-height: 100vh;
}
.grid_container--top {
  align-items: start;
}
.grid_container--bottom {
  align-items: end;
}

.grid {
  display: grid;
  gap: var(--gap, var(--space-2));
  position: relative;
}
.grid--center {
  place-items: center;
}
.grid--uneven {
  grid-template-columns: auto 2fr;
  align-items: center;
}
.grid--stretch {
  align-items: stretch;
  justify-items: stretch;
  --gap:var(--space-1);
}
.grid--align--center {
  align-items: center;
}
.grid--2 {
  grid-template-columns: 1fr;
}
.grid--3 {
  grid-template-columns: 1fr;
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.grid--images {
  grid-template-columns: 1fr;
}
@media screen and (min-width: 40em) {
  .grid--images {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: center;
  }
}
@media screen and (min-width: 80em) {
  .grid--images {
    grid-template-columns: repeat(6, minmax(0, auto));
    justify-content: center;
  }
}
@media screen and (min-width: 80em) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--md-3 {
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    z-index: 0;
  }
  .grid--custom-3 {
    grid-template-columns: 1fr 1fr 2fr;
    position: relative;
    z-index: 0;
  }
}

.auto_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5em, auto));
  grid-template-rows: repeat(auto-fit, minmax(5em, auto));
  gap: var(--gap, var(--space-1));
}
.auto_grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
}
.auto_grid--image {
  grid-template-columns: repeat(auto-fit, minmax(15em, auto));
}
.auto_grid--stretch {
  justify-items: stretch;
}
@media screen and (min-width: 80em) {
  .auto_grid--md {
    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  }
}

.card_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  gap: var(--gap, var(--space-1));
  justify-items: center;
  align-items: center;
}
@media screen and (min-width: 80em) {
  .card_grid {
    grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
  }
}
@media screen and (min-width: 100em) {
  .card_grid {
    grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
  }
}
.card_grid--tight {
  gap: var(--space-1);
}
.card_grid--loose {
  gap: var(--space-3);
}

.even_columns {
  display: grid;
  gap: 2rem;
}
@media screen and (min-width: 80em) {
  .even_columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}
.even_columns--centered {
  align-items: center;
}
.even_columns--top {
  align-items: start;
}
.even_columns--bottom {
  align-items: end;
}
.even_columns--gapless {
  gap: 0;
}

.project_grid {
  display: grid;
  gap: var(--gap, var(--space-4));
  grid-template-columns: 1fr;
}
@media screen and (min-width: 80em) {
  .project_grid--right {
    grid-template-columns: 1fr 2fr;
  }
  .project_grid--left {
    grid-template-columns: 2fr 1fr;
  }
}

.flex {
  display: flex;
  gap: var(--gap, var(--space-1));
}
.flex--column {
  flex-direction: column;
}
.flex--row {
  flex-direction: row;
}
.flex--center {
  justify-content: center;
  align-items: center;
}
.flex--between {
  justify-content: space-between;
}
.flex--wrap {
  flex-wrap: wrap;
}
.flex--nowrap {
  flex-wrap: nowrap;
}
.flex--start {
  justify-content: flex-start;
  align-items: flex-start;
}

.sr-only {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

.z-index--top {
  z-index: 1000;
}

.tagline_wrapper {
  position: relative;
}

.tagline {
  color: var(--clr-gold-700);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
  font-size: var(--step-1);
  width: 100%;
}

.tagline-divider {
  background: var(--divider-gradient);
  height: 1px;
  width: 100%;
}

.section {
  position: relative;
  padding-block: var(--space-4);
}
.section--small {
  padding-block: var(--space-5);
}
.section--med {
  padding-block: var(--space-6);
}
.section--large {
  padding-block: var(--space-7);
}
.section--xlarge {
  padding-block: var(--space-8);
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

.faded-image {
  background: url("./../.../../public/images/headshots/hs9.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 8px;
  z-index: 0;
  min-height: 200px;
  max-width: 400px;
}
.faded-image.is-connect {
  background: url("./../.../../public/images/headshots/hs9.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 8px;
  z-index: 0;
  min-height: 200px;
  max-width: 100%;
}
.faded-image.is-alt {
  background: url("./../.../../public/images/headshots/voicePanel1.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 8px;
  z-index: 0;
  min-height: 200px;
  max-width: 100%;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.display-lvl-heading {
  font-size: var(--fs-display-lvl-heading);
  font-weight: normal;
}

.top-lvl-heading {
  font-size: var(--fs-top-lvl-heading);
  font-weight: normal;
}

.mid-lvl-heading {
  font-size: var(--fs-mid-lvl-heading);
  font-weight: normal;
}

.sub-lvl-heading {
  font-size: var(--fs-sub-lvl-heading);
  font-weight: normal;
}

.p-large {
  font-size: var(--step-3);
}

.p-small {
  font-size: var(--step-1);
}

.txt-align-center {
  text-align: center;
}

.subheading, .ff-heading {
  font-family: "Gambarino", serif;
}

.ff-body {
  font-family: "Switzer", sans-serif;
}

.number {
  font-size: var(--step-10);
  font-family: "Gambarino", serif;
  color: var(--color-surface);
  position: absolute;
  left: calc(100% - 30vw);
  top: -1em;
  z-index: -1;
}
@media screen and (min-width: 40em) {
  .number {
    top: -1em;
  }
}
@media screen and (min-width: 80em) {
  .number {
    left: calc(100% - 25vw);
    top: -1em;
  }
}

.small-txt {
  position: absolute;
  top: 5em;
  left: 1rem;
  font-size: var(--step-1);
  color: var(--color-text);
}
@media screen and (min-width: 40em) {
  .small-txt {
    top: 8em;
    font-size: var(--step-2);
  }
}
@media screen and (min-width: 80em) {
  .small-txt {
    top: 10em;
    font-size: var(--step-2);
  }
}

.u-relative {
  position: relative;
}

.txt-color-accent {
  color: var(--color-highlight);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsla(0, 0%, 0%, 0.7);
  width: 100%;
  height: 100%;
  z-index: 1;
}

.social-icon {
  fill: var(--color-txt);
  width: 1.5rem;
  height: 1.5rem;
  transition: fill 200ms ease-in;
  cursor: pointer;
}
.social-icon:hover, .social-icon:focus {
  fill: var(--color-highlight);
}

.full-height {
  height: 100%;
}

i {
  color: var(--color-highlight);
}

.nav-link {
  color: var(--color-text);
  text-decoration: none;
  transition: all 200ms ease-in;
}
.nav-link:hover {
  color: var(--color-highlight);
}

a:hover {
  filter: brightness(200%);
}

.image-size--role img {
  width: 100%;
  max-width: 300px;
  object-fit: cover;
  height: 100%;
  max-height: 300px;
}

.outlined-text {
  font-family: "Gambarino", serif;
  font-size: var(--step-7);
  color: transparent;
  line-height: 1;
  opacity: 0.3;
  -webkit-text-stroke: 1px rgba(255, 236, 196, 0.25);
  text-stroke: 0.5px rgba(255, 236, 196, 0.25); /* For fallback */
}

.oversize-bg-text {
  font-family: "Gambarino", serif;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 236, 196, 0.25);
  text-stroke: 0.5px rgba(255, 236, 196, 0.25); /* For fallback */
}

.width--full {
  width: 100%;
}

.max-width--400 {
  max-width: 800px;
  object-fit: cover;
}

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

.grid-col-1 {
  grid-column: 1/-1;
}
@media screen and (min-width: 40em) {
  .grid-col-1 {
    grid-column: 1;
    grid-row: 2;
  }
}

.grid-col-2 {
  grid-column: 1/-1;
}
@media screen and (min-width: 40em) {
  .grid-col-2 {
    grid-column: 2;
    grid-row: 2;
    margin-inline-start: 20%;
    z-index: 1;
  }
}

.grid-col-3 {
  grid-column: 1/-1;
}
@media screen and (min-width: 40em) {
  .grid-col-3 {
    grid-column: 3;
    grid-row: 2;
  }
}

@media screen and (min-width: 40em) {
  .max-width--heading {
    max-width: 15ch;
  }
}

.link {
  color: var(--link-default);
  text-decoration: none;
}
.link--pressed {
  color: var(--link-pressed);
}

.hidden {
  display: none;
  visibility: hidden;
}

.icon {
  fill: var(--color-surface);
  width: 1.5rem;
  height: 1.5rem;
  transition: fill 200ms ease-in;
  cursor: pointer;
}
.honeypot {
  position: absolute;
  left: -9999px;
}

/* site header*/
.site_header {
  padding-block: var(--space-3);
  position: fixed;
  width: 100%;
  z-index: 1900;
  background-color: black;
}

.grid--header {
  grid-template-columns: auto auto;
  position: relative;
  align-items: center;
}

.logo-size {
  width: 5rem;
  height: 54px;
}

.logo {
  height: 54px;
}

.menu-toggle {
  display: none;
}

/* Base (mobile first) */
.site-navigation {
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.site-navigation.show {
  display: flex;
}

/* Style the hamburger button */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle .icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  color: var(--clr-cream-50);
}

/* Larger screens: show nav & hide toggle */
@media (min-width: 48em) {
  .menu-toggle {
    display: none;
  }
  .site-navigation {
    display: flex !important; /* always show */
    flex-direction: row;
    gap: 2rem;
  }
}
.site_footer {
  background-color: black;
  color: var(--clr-slate-300);
}

.logo-size--footer img {
  max-width: 150px;
}

.button {
  padding-block: 16px;
  padding-inline: 32px;
  border-radius: 8px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--step-1);
  letter-spacing: 2px;
  text-align: center;
  width: 100%;
}
.button-primary {
  background-color: var(--btn-primary);
  color: var(--clr-base-900);
}
.button-secondary {
  background-color: transparent;
  color: var(--clr-cream-50);
  border: solid 1px var(--clr-gold-700);
}

.button-group {
  width: 100%;
}

.play-button {
  background: none;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  transition: all 0.3s ease;
}

.audio-icon {
  width: 1rem;
  height: 1rem;
  fill: var(--clr-base-900);
}
.audio-icon--large {
  width: 36px;
  height: 36px;
}
.audio-icon--white {
  fill: var(--clr-cream-50);
}
.audio-icon--gold {
  fill: var(--clr-gold-600);
}

.download-button {
  background: none;
  padding: var(--space-1);
  border: none;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  color: var(--clr-base-900);
  font-size: var(--step-1);
  transition: all 0.3s ease;
}

.play-button, .download-button {
  position: relative;
  z-index: 10;
}

.button--download {
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

input, textarea {
  background-color: var(--clr-slate-900);
  border-radius: 7px;
  border: none;
  color: var(--clr-cream-50);
  padding-inline: var(--space-1);
}

textarea {
  padding-block-start: var(--space-1);
}

input {
  padding-block: var(--space-1);
}

label {
  color: var(--clr-cream-50);
}

.file-upload {
  padding-inline: var(--space-1);
}

fieldset {
  border: none;
}

/*@Utility Classes Paddding;*/
.padding-1 {
  padding: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.padding-inline-1 {
  padding-inline: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.padding-inline-start-1 {
  padding-inline-start: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.padding-inline-end-1 {
  padding-inline-end: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.padding-block-1 {
  padding-block: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.padding-block-start-1 {
  padding-block-start: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.padding-block-end-1 {
  padding-block-end: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}

/*@Utility Classes Margin;*/
.margin-1 {
  margin: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.margin-inline-1 {
  margin-inline: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.margin-inline-start-1 {
  margin-inline-start: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.margin-inline-end-1 {
  margin-inline-end: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.margin-block-1 {
  margin-block: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.margin-block-start-1 {
  margin-block-start: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}
.margin-block-end-1 {
  margin-block-end: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
}

/*@Utility Classes Paddding;*/
.padding-2 {
  padding: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.padding-inline-2 {
  padding-inline: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.padding-inline-start-2 {
  padding-inline-start: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.padding-inline-end-2 {
  padding-inline-end: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.padding-block-2 {
  padding-block: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.padding-block-start-2 {
  padding-block-start: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.padding-block-end-2 {
  padding-block-end: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}

/*@Utility Classes Margin;*/
.margin-2 {
  margin: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.margin-inline-2 {
  margin-inline: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.margin-inline-start-2 {
  margin-inline-start: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.margin-inline-end-2 {
  margin-inline-end: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.margin-block-2 {
  margin-block: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.margin-block-start-2 {
  margin-block-start: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}
.margin-block-end-2 {
  margin-block-end: clamp(1rem, 0.73rem + 1.36vw, 1.88rem);
}

/*@Utility Classes Paddding;*/
.padding-3 {
  padding: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.padding-inline-3 {
  padding-inline: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.padding-inline-start-3 {
  padding-inline-start: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.padding-inline-end-3 {
  padding-inline-end: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.padding-block-3 {
  padding-block: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.padding-block-start-3 {
  padding-block-start: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.padding-block-end-3 {
  padding-block-end: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}

/*@Utility Classes Margin;*/
.margin-3 {
  margin: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.margin-inline-3 {
  margin-inline: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.margin-inline-start-3 {
  margin-inline-start: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.margin-inline-end-3 {
  margin-inline-end: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.margin-block-3 {
  margin-block: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.margin-block-start-3 {
  margin-block-start: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}
.margin-block-end-3 {
  margin-block-end: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
}

/*@Utility Classes Paddding;*/
.padding-4 {
  padding: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.padding-inline-4 {
  padding-inline: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.padding-inline-start-4 {
  padding-inline-start: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.padding-inline-end-4 {
  padding-inline-end: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.padding-block-4 {
  padding-block: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.padding-block-start-4 {
  padding-block-start: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.padding-block-end-4 {
  padding-block-end: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}

/*@Utility Classes Margin;*/
.margin-4 {
  margin: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.margin-inline-4 {
  margin-inline: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.margin-inline-start-4 {
  margin-inline-start: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.margin-inline-end-4 {
  margin-inline-end: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.margin-block-4 {
  margin-block: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.margin-block-start-4 {
  margin-block-start: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}
.margin-block-end-4 {
  margin-block-end: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}

/*@Utility Classes Paddding;*/
.padding-5 {
  padding: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.padding-inline-5 {
  padding-inline: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.padding-inline-start-5 {
  padding-inline-start: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.padding-inline-end-5 {
  padding-inline-end: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.padding-block-5 {
  padding-block: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.padding-block-start-5 {
  padding-block-start: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.padding-block-end-5 {
  padding-block-end: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}

/*@Utility Classes Margin;*/
.margin-5 {
  margin: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.margin-inline-5 {
  margin-inline: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.margin-inline-start-5 {
  margin-inline-start: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.margin-inline-end-5 {
  margin-inline-end: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.margin-block-5 {
  margin-block: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.margin-block-start-5 {
  margin-block-start: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}
.margin-block-end-5 {
  margin-block-end: clamp(3rem, 2.38rem + 3.11vw, 5rem);
}

/*@Utility Classes Paddding;*/
.padding-6 {
  padding: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.padding-inline-6 {
  padding-inline: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.padding-inline-start-6 {
  padding-inline-start: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.padding-inline-end-6 {
  padding-inline-end: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.padding-block-6 {
  padding-block: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.padding-block-start-6 {
  padding-block-start: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.padding-block-end-6 {
  padding-block-end: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}

/*@Utility Classes Margin;*/
.margin-6 {
  margin: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.margin-inline-6 {
  margin-inline: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.margin-inline-start-6 {
  margin-inline-start: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.margin-inline-end-6 {
  margin-inline-end: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.margin-block-6 {
  margin-block: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.margin-block-start-6 {
  margin-block-start: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}
.margin-block-end-6 {
  margin-block-end: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
}

/*@Utility Classes Paddding;*/
.padding-7 {
  padding: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.padding-inline-7 {
  padding-inline: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.padding-inline-start-7 {
  padding-inline-start: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.padding-inline-end-7 {
  padding-inline-end: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.padding-block-7 {
  padding-block: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.padding-block-start-7 {
  padding-block-start: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.padding-block-end-7 {
  padding-block-end: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}

/*@Utility Classes Margin;*/
.margin-7 {
  margin: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.margin-inline-7 {
  margin-inline: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.margin-inline-start-7 {
  margin-inline-start: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.margin-inline-end-7 {
  margin-inline-end: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.margin-block-7 {
  margin-block: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.margin-block-start-7 {
  margin-block-start: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}
.margin-block-end-7 {
  margin-block-end: clamp(5rem, 3.82rem + 6.22vw, 10rem);
}

/*@Utility Classes Paddding;*/
.padding-8 {
  padding: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.padding-inline-8 {
  padding-inline: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.padding-inline-start-8 {
  padding-inline-start: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.padding-inline-end-8 {
  padding-inline-end: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.padding-block-8 {
  padding-block: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.padding-block-start-8 {
  padding-block-start: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.padding-block-end-8 {
  padding-block-end: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}

/*@Utility Classes Margin;*/
.margin-8 {
  margin: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.margin-inline-8 {
  margin-inline: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.margin-inline-start-8 {
  margin-inline-start: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.margin-inline-end-8 {
  margin-inline-end: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.margin-block-8 {
  margin-block: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.margin-block-start-8 {
  margin-block-start: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}
.margin-block-end-8 {
  margin-block-end: clamp(6rem, 4.38rem + 10.88vw, 12.5rem);
}

.hero {
  padding-block-start: 15vh;
  align-items: center;
}

.hero-header {
  grid-column: 1;
}

.hero-image {
  scale: 1.4;
}

.audio-player {
  position: relative;
  display: grid;
  align-content: center;
  border: 2px solid var(--clr-gold-900);
  border-radius: 2rem;
  background-image: linear-gradient(var(--clr-rust-900), var(--clr-gray-900)), var(--gradient-base-to-gold);
  color: var(--clr-gold-50);
  max-width: 465px;
  padding-inline: 12px;
  padding-block: 0.5rem;
  width: 100%;
}

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

.progress-bg {
  position: absolute;
  border-radius: 2rem;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--gradient-gray-deep);
  opacity: 0.15;
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

.loading {
  opacity: 0.7;
}

.bg-pattern {
  position: absolute;
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
  z-index: -1;
}
.bg-pattern--one {
  background: url("./../.../../public/images/background/soundboard-pattern-1.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: 50%;
}
.bg-pattern--two {
  background: url("./../.../../public/images/background/soundboard-pattern-2.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  left: 30%;
}
.bg-pattern--three {
  background: url("./../.../../public/images/background/soundboard-pattern-1.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  bottom: -10%;
  left: 100%;
}

.marquee-container {
  position: relative;
  top: 100%;
  left: 0;
  width: 100%;
  height: 120px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  z-index: 100;
  transform: translateY(-50%);
}

.marquee-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 80px;
  margin: 0 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  font-size: 18px;
  color: #333;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.instagram-wrapper {
  position: relative;
  min-height: 500px; /* Adjust based on expected size */
  overflow: hidden;
  height: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Override Instagram's default styling */
.instagram-media {
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 100% !important;
  width: 100% !important;
}

.video-wrapper {
  padding-inline: 20px;
  border-radius: 8px;
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  overflow: hidden;
  height: 100%;
}

.video-wrapper iframe {
  position: absolute;
  padding-inline: 20px;
  border-radius: 8px;
  background-color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Responsive iframe wrapper */
.fade-up-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-up-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

.instagram-wrapper {
  transition-delay: 0.2s;
}

.video-wrapper {
  transition-delay: 0.4s;
  margin-block-start: var(--space-3);
}

.embed-placeholder {
  height: 500px;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

.about .button-group {
  flex-direction: column;
}
@media screen and (min-width: 40em) {
  .about .button-group {
    flex-direction: row;
  }
}

.connect .faded-image {
  grid-column: 1/-1;
}
@media screen and (min-width: 80em) {
  .connect .faded-image {
    grid-column: 3;
  }
}

.heading-wrapper {
  flex-direction: column;
}
@media screen and (min-width: 40em) {
  .heading-wrapper {
    flex-direction: row;
    justify-content: space-between;
  }
  .heading-wrapper h2 {
    max-width: 15ch;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-txt);
  font-family: "Switzer", sans-serif;
  position: relative;
  font-weight: 400;
  scroll-behavior: smooth;
}

main {
  height: auto;
  position: relative;
}

h1,
h2,
h3 {
  font-family: "Gambarino", serif;
  text-transform: capitalize;
}

p {
  font-size: var(--fs-body);
  margin-block-end: 0.5em;
  max-width: 45ch;
}

figure {
  position: relative;
  z-index: 1;
}

ul,
ol {
  margin-inline: auto;
  list-style-position: inside;
}

img {
  width: 100%;
}

address {
  font-style: normal;
}

/*# sourceMappingURL=global.css.map */