@layer atoms {
  .a-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--brand__spacing--tiny);
    justify-content: center;
    background: var(--btn--bgc, transparent);
    color: var(--btn--color, currentColor);
    border: 1px solid var(--btn--bc, transparent);
    font-size: var(--brand__font-size--16px);
    font-weight: 500;
    border-radius: var(--btn-br, 70px);
    text-decoration: none;
    padding: var(--btn--padding);
    transition: var(--btn--transition, color 0.3 ease-in-out);
    cursor: pointer;
    flex-shrink: 0;
    z-index: var(--btn--zindex);
  }
  .a-btn:disabled, .a-btn[aria-disabled=true], .a-btn[disabled] {
    pointer-events: none;
    opacity: 0.5;
  }
  .a-btn:focus-visible {
    outline: 3px solid var(--btn-outline-color, var(--brand__color--bg-dark));
    transition: outline-offset 0.1s ease;
    outline-offset: 5px;
  }
  .a-btn--primary {
    --btn--padding: 10px 20px;
    --btn--bgc: var(--brand__color--white);
    --btn--color: var(--brand__color--black);
    --brand__link--color: var(--brand__color--black);
    border: 1px solid var(--brand__color--primary);
  }
  .a-btn--primary:hover {
    --brand__link--hover-color: var(--brand__color--dark-grey);
  }
}
@layer atoms {
  .a-tag {
    display: flex;
    align-items: center;
    flex-flow: row;
    background-color: #f5e3df;
    color: var(--brand__color--secondary);
    height: min-content;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 5px;
  }
}
@layer atoms {
  .a-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #4e2f2f;
    border-radius: 50%;
    background-color: transparent;
    pointer-events: none;
    transition: transform 0.15s ease, width 0.15s ease, height 0.15s ease, opacity 0.2s ease;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    z-index: 10000;
    opacity: 0;
  }
  @media (hover: none) or (pointer: coarse) or (max-width: 768px) {
    .a-cursor {
      display: none !important;
    }
  }
  .a-cursor.hover {
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%) scale(1.2);
  }
}
@layer components {
  .c-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--brand__spacing--20);
    position: sticky;
    top: var(--brand__spacing--20);
    z-index: 10;
  }
  .c-nav__list {
    display: flex;
    width: 100%;
    max-width: 900px;
    opacity: 1;
    align-items: center;
    flex: 1 0 0px;
    justify-content: space-between;
  }
  .c-nav__item a {
    font-size: var(--brand__font-size--16px);
    line-height: 16px;
    padding: 6px 16px;
    border-radius: 60px;
    border: 1px solid;
    transition: border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .c-nav__item a:hover {
    border-color: var(--brand__color--border-light);
    transition: border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@layer components {
  .c-name {
    width: 100%;
    max-width: 100%;
    padding-block-start: var(--brand__spacing--40);
  }
  .c-name svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }
  .c-name-foreignObject {
    overflow: visible;
  }
  .c-name h1 {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: -14px;
    line-height: 85%;
    font-size: 355.26px;
    margin: 0;
    white-space: nowrap;
  }
}
@layer components {
  .c-intro {
    padding: 280px 20px 100px;
    max-width: 600px;
  }
}
@layer components {
  .c-contact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: var(--brand__spacing--huge) var(--brand__spacing--20);
    gap: var(--brand__spacing--20);
  }
  @media (max-width: 768px) {
    .c-contact {
      grid-template-columns: 1fr;
      gap: var(--brand__spacing--40);
      padding-block: var(--brand__spacing--100);
    }
  }
  .c-contact__info {
    display: flex;
    flex-direction: column;
    gap: var(--brand__spacing--20);
  }
}
@layer components {
  .c-card__link {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    gap: 12px;
  }
  .c-card__heading {
    display: flex;
    justify-content: space-between;
    gap: var(--brand__spacing--small);
    align-items: center;
  }
  .c-card__heading h3 {
    color: var(--brand__color--secondary);
  }
  .c-card__media {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }
  .c-card__media img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.4s ease;
  }
  .c-card__view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 6px 16px;
    color: var(--brand__color--white) !important;
    background-color: var(--brand__color--secondary);
    border-radius: 4px;
    z-index: 2;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
  }
  .c-card__link:hover .c-card__media img {
    transform: scale(1.05);
  }
  .c-card__link:hover .c-card__view {
    opacity: 1;
  }
}
@layer components {
  .c-card-lister {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    container-name: card-lister;
    gap: var(--brand__spacing--80);
    padding-inline: var(--brand__spacing--20);
  }
  .c-card-lister__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--brand__spacing--20);
    row-gap: var(--brand__spacing--48);
  }
  @container card-lister (min-width: 640px) {
    .c-card-lister__wrapper {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
@layer components {
  .c-about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-inline: var(--brand__spacing--20);
    padding-block-start: var(--brand__spacing--100);
    gap: var(--brand__spacing--20);
  }
  @media (max-width: 768px) {
    .c-about {
      grid-template-columns: 1fr;
      gap: var(--brand__spacing--40);
    }
  }
  .c-about h2 {
    line-height: 40px;
  }
  .c-about__wrapper {
    display: flex;
    flex-direction: column;
    max-width: 720px;
    gap: var(--brand__spacing--40);
  }
  .c-about__content {
    display: flex;
    flex-direction: column;
    gap: var(--brand__spacing--20);
  }
  .c-about__media {
    border-radius: 10px;
  }
  .c-about__media img {
    border-radius: 10px;
    height: 600px !important;
    width: 100%;
    object-fit: cover;
    object-position: top;
  }
  .c-about__projects {
    display: flex;
    justify-content: space-between;
    gap: var(--brand__spacing--40);
  }
  @media (max-width: 768px) {
    .c-about__projects {
      flex-direction: column;
    }
  }
  .c-about__projects > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  @media (max-width: 768px) {
    .c-about__projects > div {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
  }
  .c-about__projects h3 {
    --brand__font-size--h3: 88px;
    --brand__font-weight--h3: 500;
    line-height: 1;
  }
  .c-about__projects p {
    --brand__font-size--p: var(--brand__font-size--16px);
    color: var(--brand__color--text-secondary);
  }
  @media (max-width: 768px) {
    .c-about__wrapper {
      grid-template-columns: 1fr;
    }
  }
}
@layer components {
  .c-what-i-do-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-inline: var(--brand__spacing--20);
    padding-block-start: var(--brand__spacing--100);
    gap: var(--brand__spacing--20);
  }
  @media (max-width: 768px) {
    .c-what-i-do-container {
      grid-template-columns: 1fr;
      gap: var(--brand__spacing--40);
    }
  }
  .c-what-i-do__item {
    margin-bottom: 0;
    border-bottom: 1px solid var(--brand__color--border-light);
  }
  .c-what-i-do__item summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
  }
  .c-what-i-do__item summary:focus-visible {
    outline: 2px solid var(--btn-outline-color, var(--brand__color--secondary));
    transition: outline-offset 0.1s ease;
    outline-offset: 5px;
  }
  .c-what-i-do__item summary::-webkit-details-marker {
    display: none;
  }
  .c-what-i-do__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--brand__spacing--25) 0;
  }
  .c-what-i-do__title {
    --brand__font-size--h2: var(--brand__font-size--25px);
    color: var(--brand__color--secondary);
  }
  .c-what-i-do__arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }
  .c-what-i-do__arrow svg {
    width: 100%;
    height: 100%;
    stroke: var(--brand__color--secondary);
    fill: none;
    stroke-width: 2;
  }
  .c-what-i-do__item:first-of-type .c-what-i-do__header {
    padding-block-start: 0;
  }
  .c-what-i-do__item[open] .c-what-i-do__arrow {
    transform: rotate(180deg);
  }
  .c-what-i-do__content {
    color: var(--brand__color--text-secondary);
    padding-bottom: var(--brand__spacing--25);
  }
  .c-what-i-do__content p {
    padding-block-end: var(--brand__spacing--20);
  }
  .c-what-i-do__list-item:before {
    content: "- ";
    margin-right: var(--brand__spacing--tiny);
  }
}
@layer components {
  .c-logo-carousel {
    padding-block: var(--brand__spacing--48);
    border-bottom: 1px solid var(--brand__color--border);
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .c-logo-track {
    display: flex;
    gap: 60px;
    animation: scroll 20s linear infinite;
    width: fit-content;
  }
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  .c-logo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .c-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-icon svg {
    width: 100%;
    height: 100%;
  }
  /* Pause on hover */
  .c-logo-carousel:hover .c-logo-track {
    animation-play-state: paused;
  }
}
@layer components {
  .c-project-detail {
    padding-inline: var(--brand__spacing--20);
  }
  .c-project-detail__header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block: var(--brand__spacing--100);
    align-items: center;
    gap: var(--brand__spacing--20);
  }
  .c-project-detail__header h1 {
    font-size: var(--brand__font-size--h1);
  }
  @media (max-width: 768px) {
    .c-project-detail__header {
      grid-template-columns: 1fr;
      --brand__font-size--h1: var(--brand__font-size--45px);
    }
  }
  .c-project-detail__media img {
    border-radius: 10px;
  }
  .c-project-detail__list {
    padding-block: var(--brand__spacing--80) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--brand__spacing--20);
  }
  @media (max-width: 768px) {
    .c-project-detail__list {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  .c-project-detail__list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--brand__spacing--small);
  }
  @media (max-width: 768px) {
    .c-project-detail__list li {
      align-items: flex-start;
    }
  }
  .c-project-detail__section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-start: var(--brand__spacing--100);
    gap: var(--brand__spacing--20);
  }
  @media (max-width: 768px) {
    .c-project-detail__section {
      grid-template-columns: 1fr;
    }
  }
  .c-project-detail__cta {
    display: flex;
    padding-block: var(--brand__spacing--100);
  }
}
@layer components {
  /* Smooth transitions for hover effects */
  .c-card {
    transition: transform 0.3s ease;
    will-change: transform;
  }
  /* Ensure images don't overflow during parallax */
  .c-card__media,
  .c-about__media {
    overflow: hidden;
  }
  /* Improve performance during animations */
  .c-card__media img,
  .c-about__media img {
    will-change: transform;
  }
  /* Remove will-change after animations complete (handled by JS) */
  .animation-complete {
    will-change: auto;
  }
  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .js-loaded .c-name h1,
    .js-loaded .c-intro p,
    .js-loaded .c-card,
    .js-loaded .c-about__content p,
    .js-loaded .c-about__media,
    .js-loaded .c-about__projects div,
    .js-loaded .c-what-i-do__item,
    .js-loaded .c-contact__title,
    .js-loaded .c-contact__info > *,
    .js-loaded .c-nav__item,
    .js-loaded section > h2 {
      opacity: 1 !important;
    }
  }
}
@layer components {
  .c-transition {
    position: fixed;
    inset: 0;
    background: rosybrown;
    pointer-events: none;
    z-index: 9999;
  }
}
@layer settings {
  :root {
    --scroll-behavior: smooth;
  }
  @media screen and (prefers-reduced-motion: reduce) {
    :root {
      --scroll-behavior: auto;
      --brand__duration: 0;
    }
  }
}
@layer elements {
  html {
    scroll-behavior: var(--scroll-behavior);
  }
  body {
    color: var(--brand__color--text);
    font-family: var(--brand__font-family);
    font-size: var(--brand__font-size);
    line-height: var(--brand__line-height);
    accent-color: var(--brand__color--primary);
  }
  :target {
    scroll-margin-top: var(--set-scroll-margin-top, calc(var(--header--height, 0) + var(--brand__spacing)));
  }
  :where(summary) {
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  :where(summary)::-webkit-details-marker {
    display: none;
  }
  :where(figure, figcaption, blockquote) {
    padding: 0;
    margin: 0;
  }
}
@layer elements {
  a {
    color: var(--brand__link--color, currentColor);
    transition: var(--brand__link--transition, color 0.2s ease);
    text-decoration: var(--brand__link--text-decoration);
    width: fit-content;
    text-decoration-color: currentColor;
    line-height: 16px;
    text-underline-offset: 0.25em;
    will-change: color;
  }
  a:active, a:hover {
    cursor: pointer;
    color: var(--brand__link--hover-color);
  }
  a:focus-visible {
    outline: 2px solid var(--btn-outline-color, var(--brand__color--black));
    transition: outline-offset 0.1s ease;
    outline-offset: 5px;
  }
}
@layer elements {
  :where(picture, img) {
    width: 100%;
    height: auto;
  }
  :where(figcaption) {
    font-style: italic;
    opacity: 0.8;
    margin-top: 4px;
    font-size: var(--brand__font-size--small);
    text-align: start;
  }
  :where(svg) {
    flex-shrink: 0;
  }
}
@layer elements {
  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    font-family: var(--brand__font-family--heading);
    text-wrap: balance;
  }
  h2,
  .h2 {
    font-size: var(--brand__font-size--h2);
    line-height: 1.1;
    font-weight: 400;
  }
  h3,
  .h3 {
    font-size: var(--brand__font-size--h3);
    line-height: 1.1;
    font-weight: var(--brand__font-weight--h3);
  }
  h4,
  .h4 {
    font-size: var(--brand__font-size--h4);
    line-height: 1.1;
    font-weight: 400;
  }
  h5,
  .h5 {
    font-size: var(--brand__font-size--h5);
    line-height: 1.1;
    font-weight: 400;
  }
  h6,
  .h6 {
    font-size: var(--brand__font-size--h6);
    line-height: 1.1;
    font-weight: 400;
  }
}
@layer fonts {
  @font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../assets/fonts/RobotoCondensed-Regular.woff2") format("woff2");
  }
  @font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../../assets/fonts/RobotoCondensed-SemiBold.woff2") format("woff2");
  }
  @font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../assets/fonts/RobotoCondensed-Bold.woff2") format("woff2");
  }
}
@layer elements {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  body {
    -webkit-font-smoothing: antialiased;
    display: flex;
    font-family: var(--brand__font-family);
    flex-direction: column;
    color: var(--brand__color--text);
    min-height: 100vh;
    transition: var(--transition);
    cursor: none;
  }
  main {
    flex: 1;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  p,
  ul,
  li {
    font-size: var(--brand__font-size--p, var(--brand__font-size--20px));
    line-height: 24px;
    font-weight: 400;
    color: var(--brand__color--black);
  }
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
  ::selection {
    background: #e2c7c3;
  }
  ::-moz-selection {
    background: #e2c7c3;
  }
  #work,
  #about,
  #contact {
    scroll-margin-top: var(--brand__spacing--60);
  }
}
@layer settings, fonts, elements, objects, atoms, molecules, components, utilities;
@layer settings {
  :root {
    --wrapper--spacing: 20px;
    --wrapper--width: 72rem;
    --wrapper--width--small: 50rem;
    --wrapper--mimic-spacing: max(
        calc((100vw - var(--wrapper--width)) / 2),
        var(--wrapper--spacing)
    );
    --wrapper--mimic-spacing--small: max(
        calc((100vw - var(--wrapper--width--small)) / 2),
        var(--wrapper--spacing)
    );
  }
  @media (--wide) {
    :root {
      --wrapper--width--small: 80rem;
    }
  }
}
@layer objects {
  .o-wrapper-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
    transition: var(--transition);
  }
  .o-wrapper {
    display: grid;
    column-gap: var(--wrapper--spacing);
    grid-template-columns: minmax(0, 1fr) min(var(--wrapper--width), 100% - 2 * var(--wrapper--spacing)) minmax(0, 1fr);
  }
  .o-wrapper > * {
    grid-column: 2;
  }
  .o-wrapper--small {
    --wrapper--width: var(--wrapper--width--small);
  }
  .o-wrapper--full-width {
    grid-column: 1/-1;
  }
}
@layer objects {
  .o-flex {
    display: flex;
  }
  .o-flex--wrap {
    flex-wrap: wrap;
  }
  .o-flex--jc-sb {
    justify-content: space-between;
  }
  .o-flex--jc-e {
    justify-content: flex-end;
  }
  .o-flex--jc-c {
    justify-content: center;
  }
  .o-flex--ai-c {
    align-items: center;
  }
  .o-flex--ai-e {
    align-items: flex-end;
  }
  .o-flex--ai-b {
    align-items: baseline;
  }
  .o-flex--equal > * {
    flex: 1 1 0;
  }
  .o-flex--column {
    flex-direction: column;
  }
  .o-flex-item--shrink-0 {
    flex-shrink: 0;
  }
  .o-flex-item--shrink-1 {
    flex-shrink: 1;
  }
  .o-flex-item--grow-1 {
    flex-grow: 1;
  }
}
@layer objects {
  .o-max-col-grid {
    --grid-layout-gap: var(--max-col-grid__gap, var(--brand__spacing));
    --grid-column-count: var(--set-max-col-grid__count, var(--max-col-grid__count, 8));
    --grid-item--min-width: var(--max-col-grid__width, 215px);
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
    place-items: var(--max-col-grid__pi, stretch);
  }
  .o-max-col-grid--center {
    --max-col-grid__pi: center;
  }
  .o-max-col-grid--center-v {
    --max-col-grid__pi: center stretch;
  }
  .o-max-col-grid--1 {
    --max-col-grid__count: 1;
  }
  .o-max-col-grid--2 {
    --max-col-grid__count: 2;
  }
  .o-max-col-grid--3 {
    --max-col-grid__count: 3;
  }
  .o-max-col-grid--4 {
    --max-col-grid__count: 4;
  }
  .o-max-col-grid--5 {
    --max-col-grid__count: 5;
    --max-col-grid__width: 150px;
  }
  .o-max-col-grid--6 {
    --max-col-grid__count: 6;
    --max-col-grid__width: 120px;
  }
  .o-max-col-grid--min-width-default {
    --max-col-grid__width: 1px;
  }
  .o-max-col-grid-gap--none {
    --max-col-grid__gap: 0px;
  }
}
.o-grid-item {
  container-type: inline-size;
}

@layer objects {
  .o-gap {
    gap: var(--brand__spacing);
  }
  .o-gap--none {
    gap: 0;
  }
  .o-gap--tiny {
    gap: var(--brand__spacing--tiny);
  }
  .o-gap--small {
    gap: var(--brand__spacing--small);
  }
  .o-gap--large {
    gap: var(--brand__spacing--large);
  }
  .o-gap--huge {
    gap: var(--brand__spacing--huge);
  }
  .o-gap--var {
    gap: clamp(var(--brand__spacing--small), 5vw, var(--brand__spacing--large));
  }
  .o-row-gap {
    row-gap: var(--brand__spacing);
  }
  .o-row-gap--none {
    row-gap: 0;
  }
  .o-row-gap--tiny {
    row-gap: var(--brand__spacing--tiny);
  }
  .o-row-gap--small {
    row-gap: var(--brand__spacing--small);
  }
  .o-row-gap--large {
    row-gap: var(--brand__spacing--large);
  }
  .o-row-gap--huge {
    row-gap: var(--brand__spacing--huge);
  }
  .o-row-gap--var {
    row-gap: clamp(var(--brand__spacing--small), 5vw, var(--brand__spacing--large));
  }
  .o-column-gap {
    column-gap: var(--brand__spacing);
  }
  .o-column-gap--tiny {
    column-gap: var(--brand__spacing--tiny);
  }
  .o-column-gap--small {
    column-gap: var(--brand__spacing--small);
  }
  .o-column-gap--large {
    column-gap: var(--brand__spacing--large);
  }
  .o-column-gap--huge {
    column-gap: var(--brand__spacing--huge);
  }
  .o-column-gap--var {
    column-gap: clamp(var(--brand__spacing--small), 5vw, var(--brand__spacing--large));
  }
}
@layer objects {
  .o-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .o-list--inline {
    display: flex;
    flex-wrap: wrap;
  }
}
@layer objects {
  .o-fit {
    object-fit: cover;
    object-position: center center;
    height: 100%;
    width: 100%;
  }
  .o-fit--contain {
    object-fit: contain;
  }
}
@layer objects {
  .o-nav-links {
    display: none;
  }
  @media (min-width: 768px) {
    .o-nav-links {
      display: flex;
    }
  }
  .o-nav-link {
    text-decoration: none;
    color: var(--brand__color--ashy-blue);
    position: relative;
  }
  .o-nav-link:hover {
    color: var(--text-color);
  }
}
@layer objects {
  .o-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 60;
  }
  .o-toggle:focus-visible {
    outline: 3px solid var(--btn-outline-color, var(--brand__color--bg-dark));
    transition: outline-offset 0.1s ease;
    outline-offset: 5px;
  }
  @media (min-width: 768px) {
    .o-toggle {
      display: none;
    }
  }
}
@layer objects {
  .o-menu-icon {
    position: relative;
    width: 20px;
    height: 2px;
    background-color: var(--menu-icon-bg);
    transition: var(--transition);
  }
  .o-menu-icon::before,
  .o-menu-icon::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: var(--menu-icon-bg);
    transition: var(--transition);
  }
  .o-menu-icon::before {
    top: -6px;
  }
  .o-menu-icon::after {
    bottom: -6px;
  }
  /* Menu toggle animation */
  .menu-open .o-menu-icon {
    background-color: transparent;
  }
  .menu-open .o-menu-icon::before {
    transform: rotate(45deg);
    top: 0;
  }
  .menu-open .o-menu-icon::after {
    transform: rotate(-45deg);
    bottom: 0;
  }
}
:root {
  --brand__color--black: #000000;
  --brand__color--white: #ffffff;
  --brand__color--primary: #8b5e5e;
  --brand__color--secondary: #4e2f2f;
  --brand__color--dark-grey: #4c4c4c;
  --brand__color--text: #8b5e5e;
  --brand__color--border: #ffffff29;
  --brand__color--border-light: #d8cfcf;
  --brand__color--border-secondary: #ffffff14;
}

:root {
  --brand__font--primary: "Roboto Condensed";
  --brand__font--fallback: Arial, sans-serif;
  --brand__font-family: var(--brand__font--primary), var(--brand__font--fallback);
  --brand__font-family--heading: var(--brand__font-family);
  --brand__line-height: 1.5;
  --brand__font-weight--regular: 400;
  --brand__font-weight--bold: 700;
  --brand__font-size: 1.25rem;
  --brand__font-size--tiny: 0.75rem;
  --brand__font-size--small: 0.875rem;
  --brand__font-size--large: 6.25rem;
  --brand__font-size--huge: 7.5rem;
  --brand__font-size--12px: 0.75rem;
  --brand__font-size--14px: 0.875rem;
  --brand__font-size--16px: 1rem;
  --brand__font-size--18px: 1.125rem;
  --brand__font-size--20px: 1.25rem;
  --brand__font-size--24px: 1.5rem;
  --brand__font-size--25px: 1.5625rem;
  --brand__font-size--38px: 2.375rem;
  --brand__font-size--45px: 2.8125rem;
  --brand__font-size--h1: 5.5rem;
  --brand__font-size--h2: 2.5rem;
  --brand__font-size--h3: 1.25rem;
  --brand__font-size--h4: 1rem;
  --brand__font-size--h5: 0.875rem;
  --brand__font-size--h6: 0.75rem;
}

:root {
  --brand__link--color: var(--brand__color--link);
  --brand__link--hover--color: var(--brand__color--primary);
}

@custom-media --mobile (min-width: 36rem);
@custom-media --tablet (min-width: 46.25rem);
@custom-media --desktop (min-width: 61.25rem);
@custom-media --large (min-width: 78.75rem);
@custom-media --wide (min-width: 87.5rem);
@custom-media --until-xs (max-width: 22.4375rem);
@custom-media --until-mobile (max-width: 35.9375rem);
@custom-media --until-tablet (max-width: 46.1875rem);
@custom-media --until-desktop (max-width: 61.1875rem);
@custom-media --until-large (max-width: 78.6875rem);
@custom-media --until-wide (max-width: 87.4375rem);
:root {
  --brand__spacing--tiny: 5px;
  --brand__spacing--small: 10px;
  --brand__spacing--20: 20px;
  --brand__spacing--25: 25px;
  --brand__spacing--28: 28px;
  --brand__spacing--80: 80px;
  --brand__spacing--40: 40px;
  --brand__spacing--48: 48px;
  --brand__spacing--60: 60px;
  --brand__spacing--100: 100px;
  --brand__spacing--large: 90px;
  --brand__spacing--huge: 200px;
  --brand__page-max-width: 75rem;
}

@layer utilities {
  .u-sr {
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}
@layer utilities {
  .u-bg-dark {
    background-color: var(--brand__color--bg-dark);
  }
  .u-bg-mesh {
    background: radial-gradient(ellipse at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 40% 80%, rgba(120, 199, 255, 0.1) 0%, transparent 50%);
  }
}
@layer utilities {
  .u-hide-until-desktop {
    display: none;
  }
  @media (--desktop) {
    .u-hide-until-desktop {
      display: block;
    }
  }
  .u-hide-desktop {
    display: block;
  }
  @media (--desktop) {
    .u-hide-desktop {
      display: none;
    }
  }
  .u-hidden {
    display: none;
  }
  .u-block {
    display: block;
  }
  .u-rotated {
    transform: rotate(180deg);
  }
  .u-container-is {
    container-type: inline-size;
  }
  .u-m-auto {
    margin: 0 auto;
  }
}
@layer utilities {
  .u-p {
    padding: 20px;
  }
  .u-m {
    margin: 20px;
  }
}
@layer utilities {
  .u-txt-tiny {
    font-size: var(--brand__font-size--12px);
  }
  .u-txt-small {
    font-size: var(--brand__font-size--small);
  }
  .u-txt-primary {
    color: var(--brand__color--primary);
  }
  .u-txt-secondary {
    color: var(--brand__color--text-secondary);
  }
  .u-txt-25 {
    font-size: var(--brand__font-size--25px);
  }
  .u-txt-large {
    font-size: var(--brand__font-size--large);
  }
  .u-txt-center {
    text-align: center;
  }
  .u-txt-end {
    text-align: end;
  }
  .u-txt-start {
    text-align: start;
  }
  .u-txt-upper {
    text-transform: uppercase;
  }
  .u-txt-cap {
    text-transform: capitalize;
  }
  .u-txt-bold {
    font-weight: var(--brand__font-weight--bold);
  }
  .u-txt-hover:hover {
    text-decoration: underline;
    color: var(--brand__color--purple);
  }
  .u-txt-purple {
    color: var(--brand__color--purple);
  }
}
@layer utilities {
  .u-transition-colors {
    transition-property: transform, color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .u-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
  }
  .u-fade-in-up--delay-1 {
    animation-delay: 0.2s;
  }
  .u-fade-in-up--delay-2 {
    animation-delay: 0.4s;
  }
  .u-fade-in-up--delay-3 {
    animation-delay: 0.6s;
  }
  .u-fade-in-up--delay-4 {
    animation-delay: 0.8s;
  }
  .u-fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-out 2s forwards;
  }
  .u-hover-scale {
    transition: transform 0.2s ease;
  }
  .u-hover-scale:hover {
    transform: scale(1.1);
  }
  @keyframes slideIn {
    from {
      transform: scaleX(0);
      opacity: 0;
    }
    to {
      transform: scaleX(1);
      opacity: 1;
    }
  }
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  /* Special Mark Animation - Clip-path Glitch Effect */
  .u-mark-glitch {
    color: inherit;
    padding: 0;
    background: none;
    position: relative;
    display: inline-block;
  }
  .u-mark-glitch::before,
  .u-mark-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .u-mark-glitch::before {
    left: 2px;
    text-shadow: rgb(95, 45, 217) -1px 0px;
    animation: 5s linear 0s infinite alternate-reverse none running u-noise-anim-2;
  }
  .u-mark-glitch::after {
    left: -2px;
    text-shadow: rgb(148, 105, 255) 3px 0px;
    animation: 5.5s linear 0s infinite alternate-reverse none running u-noise-anim;
  }
  /* Keyframes for clip-path glitch animations */
  @keyframes u-noise-anim {
    0% {
      clip-path: inset(40% 0px 61%);
    }
    5% {
      clip-path: inset(25% 0px 58%);
    }
    10% {
      clip-path: inset(54% 0px 33%);
    }
    15% {
      clip-path: inset(90% 0px 6%);
    }
    20% {
      clip-path: inset(63% 0px 29%);
    }
    25% {
      clip-path: inset(42% 0px 73%);
    }
    30% {
      clip-path: inset(86% 0px 11%);
    }
    35% {
      clip-path: inset(17% 0px 56%);
    }
    40% {
      clip-path: inset(37% 0px 51%);
    }
    45% {
      clip-path: inset(71% 0px 24%);
    }
    50% {
      clip-path: inset(53% 0px 82%);
    }
    55% {
      clip-path: inset(31% 0px 43%);
    }
    60% {
      clip-path: inset(14% 0px 71%);
    }
    65% {
      clip-path: inset(74% 0px 18%);
    }
    70% {
      clip-path: inset(23% 0px 94%);
    }
    75% {
      clip-path: inset(48% 0px 102%);
    }
    80% {
      clip-path: inset(80% 0px 17%);
    }
    85% {
      clip-path: inset(54% 0px 25%);
    }
    90% {
      clip-path: inset(45% 0px 60%);
    }
    95% {
      clip-path: inset(69% 0px 73%);
    }
    100% {
      clip-path: inset(32% 0px 16%);
    }
  }
  @keyframes u-noise-anim-2 {
    0% {
      clip-path: inset(65% 0px 120%);
    }
    5% {
      clip-path: inset(4% 0px 91%);
    }
    10% {
      clip-path: inset(50% 0px 13%);
    }
    15% {
      clip-path: inset(70% 0px 47%);
    }
    20% {
      clip-path: inset(59% 0px 42%);
    }
    25% {
      clip-path: inset(13% 0px 71%);
    }
    30% {
      clip-path: inset(34% 0px 24%);
    }
    35% {
      clip-path: inset(26% 0px 87%);
    }
    40% {
      clip-path: inset(75% 0px 53%);
    }
    45% {
      clip-path: inset(54% 0px 25%);
    }
    50% {
      clip-path: inset(45% 0px 60%);
    }
    55% {
      clip-path: inset(83% 0px 19%);
    }
    60% {
      clip-path: inset(33% 0px 52%);
    }
    65% {
      clip-path: inset(86% 0px 11%);
    }
    70% {
      clip-path: inset(91% 0px 6%);
    }
    75% {
      clip-path: inset(96% 0px 69%);
    }
    80% {
      clip-path: inset(47% 0px 78%);
    }
    85% {
      clip-path: inset(10% 0px 54%);
    }
    90% {
      clip-path: inset(78% 0px 23%);
    }
    95% {
      clip-path: inset(65% 0px 27%);
    }
    100% {
      clip-path: inset(85% 0px 36%);
    }
  }
  /* continuous arrow wiggle */
  .u-animate-arrow {
    animation: arrow-wiggle 1s infinite ease-in-out;
  }
  /* Keyframes for arrow wiggle */
  @keyframes arrow-wiggle {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(5px);
    }
  }
}

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