/* =========================================================
   PORTFOLIO GLOBAL CSS
   Generated from navbar.txt, chat.txt. Footer has no CSS.
   ========================================================= */

/*
navbar
Responsive navbar open/close system with animated menu sizing, scroll lock, menu text morph, link dimming, icon hover states, Escape/outside-click close and hash-link smooth scroll.
Attributes: nav="menu-btn", nav="menu-btn-text", nav="main-button", nav="link", contact="open".
Classes: .nav-container, .nav-menu, .open-menu, .close-menu, .nav-btn, .nav-menu-h, .nav-btn-icon, .nav-link, .nav-menu-contact, .cta-button-a, .menu-btn, .dot-primary, .dot-secondary, .state-secondary, .nav-btn-wrapper, .is-nav-open, .is-nav-closing, .is-nav-links-dimmed, .is-nav-link-hovering, .is-nav-btn-hovered, .is-nav-link-hovered, .is-scroll-locked, .is-menu-text-open.
*/

:root {
    --nav-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --nav-duration: 300ms;
    --nav-bg-duration: 125ms;
    --nav-hover-duration: 300ms;

    --nav-closed-width: 10rem;
    --nav-closed-height: 2.25rem;

    --nav-open-width: 20rem;
    --nav-open-width-mobile: calc(100vw - 2.5rem);
  }

  .nav-container,
  .nav-menu {
    width: var(--nav-closed-width);
    height: var(--nav-closed-height);
    overflow: hidden;
    will-change: width, height, transform;
    transition:
      width var(--nav-duration) var(--nav-ease-out-quart),
      height var(--nav-duration) var(--nav-ease-out-quart),
      transform var(--nav-duration) var(--nav-ease-out-quart);
  }

  .nav-menu {
    transform: translateY(0rem);
    background-color: var(--transparent);
    transition:
      width var(--nav-duration) var(--nav-ease-out-quart),
      height var(--nav-duration) var(--nav-ease-out-quart),
      transform var(--nav-duration) var(--nav-ease-out-quart),
      background-color var(--nav-bg-duration) var(--nav-ease-out-quart);
  }

  body.is-nav-open .nav-menu,
  body.is-nav-closing .nav-menu {
    background-color: var(--black);
  }

  .open-menu {
    display: block;
  }

  .close-menu {
    display: none;
  }

  [nav="menu-btn-text"] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
  }

  .nav-menu-text-before,
  .nav-menu-text-slash,
  .nav-menu-text-label {
    display: inline-block;
  }

  .nav-menu-text-slash {
    width: 0em;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-0.35em);
    transition:
      width var(--nav-hover-duration) var(--nav-ease-out-quart),
      opacity var(--nav-hover-duration) var(--nav-ease-out-quart),
      transform var(--nav-hover-duration) var(--nav-ease-out-quart);
  }

  [nav="menu-btn-text"].is-menu-text-open .nav-menu-text-slash {
    width: 0.45em;
    opacity: 1;
    transform: translateX(0em);
  }

  .nav-btn {
    opacity: 0;
    transform: translateY(100%);
    will-change: opacity, transform;
    transition:
      opacity var(--nav-hover-duration) var(--nav-ease-out-quart),
      transform var(--nav-duration) var(--nav-ease-out-quart);
    transition-delay: 0ms;
  }

  .nav-menu-h {
    opacity: 0;
    transform: translateY(100%);
    will-change: opacity, transform;
    transition:
      opacity var(--nav-duration) var(--nav-ease-out-quart),
      transform var(--nav-duration) var(--nav-ease-out-quart);
    transition-delay: 0ms;
  }

  .nav-btn-icon {
    opacity: 0.5;
    filter: grayscale(100%);
    transform: translateY(100%);
    will-change: opacity, filter, transform;
    transition:
      opacity var(--nav-hover-duration) var(--nav-ease-out-quart),
      filter var(--nav-hover-duration) var(--nav-ease-out-quart),
      transform var(--nav-duration) var(--nav-ease-out-quart);
    transition-delay: 0ms;
  }

  body.is-nav-open:not(.is-nav-closing) .nav-btn,
  body.is-nav-open:not(.is-nav-closing) .nav-menu-h {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 250ms;
  }

  body.is-nav-open:not(.is-nav-closing) .nav-btn-icon {
    transform: translateY(0%);
    transition-delay: 0ms, 0ms, 350ms;
  }

  body.is-nav-open.is-nav-links-dimmed:not(.is-nav-closing) .nav-btn {
    opacity: 0.5;
    transition-delay: 0ms;
  }

  body.is-nav-open.is-nav-links-dimmed:not(.is-nav-closing) .nav-btn[nav="main-button"],
  body.is-nav-open.is-nav-links-dimmed:not(.is-nav-closing) .nav-btn:has([nav="main-button"]) {
    opacity: 1;
  }

  body.is-nav-open.is-nav-links-dimmed.is-nav-link-hovering:not(.is-nav-closing) .nav-btn[nav="main-button"],
  body.is-nav-open.is-nav-links-dimmed.is-nav-link-hovering:not(.is-nav-closing) .nav-btn:has([nav="main-button"]) {
    opacity: 0.5;
  }

  body.is-nav-open.is-nav-links-dimmed:not(.is-nav-closing) .nav-btn.is-nav-btn-hovered,
  body.is-nav-open.is-nav-links-dimmed:not(.is-nav-closing) .nav-btn:has(.nav-link:hover),
  body.is-nav-open.is-nav-links-dimmed:not(.is-nav-closing) .nav-btn:has(.nav-link:focus-visible) {
    opacity: 1;
  }

  body.is-nav-closing .nav-btn-icon {
    transform: translateY(100%);
    transition-delay: 0ms;
  }

  body.is-nav-closing .nav-btn,
  body.is-nav-closing .nav-menu-h {
    opacity: 0;
    transform: translateY(100%);
    transition-delay: 100ms;
  }

  .nav-link .cta-button-a {
    opacity: 0.5;
    transition: opacity var(--nav-hover-duration) var(--nav-ease-out-quart);
  }

  .nav-link:hover .cta-button-a,
  .nav-link:focus-visible .cta-button-a,
  .nav-link:focus-within .cta-button-a {
    opacity: 1;
  }

  .menu-btn .dot-secondary,
  .menu-btn .dot-primary,
  .menu-btn .dot-primary.state-secondary,
  .menu-btn .dot-primary .state-secondary {
    transition: background-color var(--nav-duration) var(--nav-ease-out-quart);
  }

  body:not(.is-nav-open) .menu-btn .dot-secondary {
    background-color: var(--light-grey);
  }

  body:not(.is-nav-open) .menu-btn .dot-primary {
    background-color: var(--green);
  }

  body:not(.is-nav-open) .menu-btn .dot-primary.state-secondary,
  body:not(.is-nav-open) .menu-btn .dot-primary .state-secondary {
    background-color: var(--green);
  }

  body:not(.is-nav-open) .menu-btn:hover .dot-secondary {
    background-color: var(--green);
  }

  body:not(.is-nav-open) .menu-btn:hover .dot-primary {
    background-color: var(--light-grey);
  }

  body:not(.is-nav-open) .menu-btn:hover .dot-primary.state-secondary,
  body:not(.is-nav-open) .menu-btn:hover .dot-primary .state-secondary {
    background-color: var(--light-grey);
  }

  body.is-nav-open .menu-btn .dot-secondary {
    background-color: var(--light-grey);
  }

  body.is-nav-open .menu-btn .dot-primary {
    background-color: var(--green);
  }

  body.is-nav-open .menu-btn .dot-primary.state-secondary,
  body.is-nav-open .menu-btn .dot-primary .state-secondary {
    background-color: var(--light-grey) !important;
  }

  body.is-nav-open .menu-btn:hover .dot-secondary {
    background-color: var(--green);
  }

  body.is-nav-open .menu-btn:hover .dot-primary {
    background-color: var(--light-grey);
  }

  body.is-nav-open .menu-btn:hover .dot-primary.state-secondary,
  body.is-nav-open .menu-btn:hover .dot-primary .state-secondary {
    background-color: var(--green) !important;
  }

  .nav-btn-icon.is-nav-link-hovered {
    opacity: 1;
    filter: grayscale(0%);
  }

  .nav-link:hover + .nav-btn-icon,
  .nav-link:hover ~ .nav-btn-icon,
  .nav-btn-wrapper:has(.nav-link:hover) > .nav-btn-icon,
  .nav-btn:has(.nav-link:hover) + .nav-btn-icon {
    opacity: 1;
    filter: grayscale(0%);
  }

  @media screen and (max-width: 767px) {
    .nav-container,
    .nav-menu {
      width: var(--nav-closed-width);
      max-width: var(--nav-open-width-mobile);
    }
  }

/*
chat
Contact/chat panel system with animated open/close panel, scroll lock, navbar coordination, step-by-step name/message/email form flow, custom placeholder typing, email validation, Webflow form submission and success state.
Attributes: contact-container="true", contact="open", contact="close", contact="toggle", contact="container", contact="content", contact="initial-message-div", contact="initial-message", contact="user-message-div", contact="user-message", contact="email-message-div", contact="email-message", contact="form-div", contact="fields", contact="name-field-container", contact="name-field", contact="name-submit", contact="message-field-container", contact="message-field", contact="message-submit", contact="email-field-container", contact="email-field", contact="email-submit", contact="linkedin-div", contact="linkedin-text", contact="submit-btn".
Classes/data: .contact-scroll-lock, .hidden, .contact-content, .contact-message, .contact-submit, .contact-form-field, .contact-submit-btn, .text-color-grey, .text-color-white, data-contact-status, data-contact-chat-ready, data-contact-placeholder, data-contact-dynamic, data-contact-char, data-contact-ready, data-contact-chat-bound.
*/

:root {
    --contact-panel-width: 30rem;
    --contact-panel-height: 30rem;
    --contact-panel-duration: 300ms;
    --contact-panel-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --contact-field-bg: var(--black, #0f161c);
    --contact-field-text: var(--white, #ffffff);
  }

  html,
  body {
    overflow-x: hidden;
  }

  html.contact-scroll-lock,
  body.contact-scroll-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  [contact-container="true"] {
    width: 0 !important;
    height: 0 !important;
    display: flex !important;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
    transition:
      width var(--contact-panel-duration) var(--contact-panel-ease),
      height var(--contact-panel-duration) var(--contact-panel-ease),
      opacity 200ms ease,
      visibility 0s linear var(--contact-panel-duration);
    contain: layout paint;
    will-change: width, height, opacity;
  }

  body[data-contact-status="open"] [contact-container="true"] {
    width: var(--contact-panel-width) !important;
    height: var(--contact-panel-height) !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition:
      width var(--contact-panel-duration) var(--contact-panel-ease),
      height var(--contact-panel-duration) var(--contact-panel-ease),
      opacity 200ms ease,
      visibility 0s linear 0s;
  }

  [contact-container="true"] > * {
    min-width: 0;
    min-height: 0;
  }

  [contact].hidden {
    display: none !important;
  }

  html:not([data-contact-chat-ready="true"]) [contact="container"] [contact="initial-message-div"],
  html:not([data-contact-chat-ready="true"]) [contact="container"] [contact="user-message-div"],
  html:not([data-contact-chat-ready="true"]) [contact="container"] [contact="email-message-div"],
  html:not([data-contact-chat-ready="true"]) [contact="container"] [contact="linkedin-div"],
  html:not([data-contact-chat-ready="true"]) [contact="container"] [contact="name-field-container"],
  html:not([data-contact-chat-ready="true"]) [contact="container"] [contact="message-field-container"],
  html:not([data-contact-chat-ready="true"]) [contact="container"] [contact="email-field-container"] {
    display: none !important;
  }

  [contact="container"] {
    overflow: hidden !important;
    min-height: 0;
  }

  [contact="content"],
  .contact-content {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  [contact="content"]::-webkit-scrollbar,
  .contact-content::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
  }

  [contact="content"]::-webkit-scrollbar-track,
  [contact="content"]::-webkit-scrollbar-thumb,
  .contact-content::-webkit-scrollbar-track,
  .contact-content::-webkit-scrollbar-thumb {
    background: transparent !important;
  }

  [contact="initial-message"],
  [contact="user-message"],
  [contact="email-message"],
  .contact-message {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  [contact="name-submit"],
  [contact="message-submit"],
  [contact="email-submit"],
  .contact-submit {
    transition: opacity 200ms ease;
  }

  .contact-submit .dot-primary,
  .contact-submit .dot-secondary,
  [contact="name-submit"] .dot-primary,
  [contact="name-submit"] .dot-secondary,
  [contact="message-submit"] .dot-primary,
  [contact="message-submit"] .dot-secondary,
  [contact="email-submit"] .dot-primary,
  [contact="email-submit"] .dot-secondary {
    transition: background-color 300ms ease;
  }

  .contact-submit:hover .dot-primary,
  .contact-submit:focus-visible .dot-primary,
  [contact="name-submit"]:hover .dot-primary,
  [contact="name-submit"]:focus-visible .dot-primary,
  [contact="message-submit"]:hover .dot-primary,
  [contact="message-submit"]:focus-visible .dot-primary,
  [contact="email-submit"]:hover .dot-primary,
  [contact="email-submit"]:focus-visible .dot-primary {
    background-color: var(--light-grey);
  }

  .contact-submit:hover .dot-secondary,
  .contact-submit:focus-visible .dot-secondary,
  [contact="name-submit"]:hover .dot-secondary,
  [contact="name-submit"]:focus-visible .dot-secondary,
  [contact="message-submit"]:hover .dot-secondary,
  [contact="message-submit"]:focus-visible .dot-secondary,
  [contact="email-submit"]:hover .dot-secondary,
  [contact="email-submit"]:focus-visible .dot-secondary {
    background-color: var(--green);
  }

  .contact-form-field,
  [contact="name-field"],
  [contact="message-field"],
  [contact="email-field"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: opacity 150ms ease;
    background-color: var(--contact-field-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
    border-color: transparent;
    caret-color: var(--contact-field-text) !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    color: var(--contact-field-text) !important;
    -webkit-text-fill-color: var(--contact-field-text) !important;
  }

  .contact-form-field:hover,
  .contact-form-field:focus,
  .contact-form-field:active,
  [contact="name-field"]:hover,
  [contact="name-field"]:focus,
  [contact="name-field"]:active,
  [contact="message-field"]:hover,
  [contact="message-field"]:focus,
  [contact="message-field"]:active,
  [contact="email-field"]:hover,
  [contact="email-field"]:focus,
  [contact="email-field"]:active {
    background-color: var(--contact-field-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
    color: var(--contact-field-text) !important;
    -webkit-text-fill-color: var(--contact-field-text) !important;
    caret-color: var(--contact-field-text) !important;
  }

  textarea[contact="message-field"],
  textarea.contact-form-field {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    resize: none;
  }

  .contact-form-field:-webkit-autofill,
  .contact-form-field:-webkit-autofill:hover,
  .contact-form-field:-webkit-autofill:focus,
  .contact-form-field:-webkit-autofill:active,
  input.contact-form-field:-webkit-autofill,
  input.contact-form-field:-webkit-autofill:hover,
  input.contact-form-field:-webkit-autofill:focus,
  input.contact-form-field:-webkit-autofill:active,
  textarea.contact-form-field:-webkit-autofill,
  textarea.contact-form-field:-webkit-autofill:hover,
  textarea.contact-form-field:-webkit-autofill:focus,
  textarea.contact-form-field:-webkit-autofill:active,
  [contact="name-field"]:-webkit-autofill,
  [contact="name-field"]:-webkit-autofill:hover,
  [contact="name-field"]:-webkit-autofill:focus,
  [contact="name-field"]:-webkit-autofill:active,
  [contact="message-field"]:-webkit-autofill,
  [contact="message-field"]:-webkit-autofill:hover,
  [contact="message-field"]:-webkit-autofill:focus,
  [contact="message-field"]:-webkit-autofill:active,
  [contact="email-field"]:-webkit-autofill,
  [contact="email-field"]:-webkit-autofill:hover,
  [contact="email-field"]:-webkit-autofill:focus,
  [contact="email-field"]:-webkit-autofill:active {
    color: var(--contact-field-text) !important;
    -webkit-text-fill-color: var(--contact-field-text) !important;
    caret-color: var(--contact-field-text) !important;
    background-color: var(--contact-field-bg) !important;
    background-image: none !important;
    box-shadow: 0 0 0px 1000px var(--contact-field-bg) inset !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--contact-field-bg) inset !important;
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
    transition:
      background-color 999999s ease-in-out 0s,
      color 999999s ease-in-out 0s,
      -webkit-text-fill-color 999999s ease-in-out 0s !important;
  }

  .contact-form-field:autofill,
  input.contact-form-field:autofill,
  textarea.contact-form-field:autofill,
  [contact="name-field"]:autofill,
  [contact="message-field"]:autofill,
  [contact="email-field"]:autofill {
    color: var(--contact-field-text) !important;
    -webkit-text-fill-color: var(--contact-field-text) !important;
    caret-color: var(--contact-field-text) !important;
    background-color: var(--contact-field-bg) !important;
    background-image: none !important;
    box-shadow: 0 0 0px 1000px var(--contact-field-bg) inset !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--contact-field-bg) inset !important;
  }

  [contact="submit-btn"],
  .contact-submit-btn,
  input[contact="submit-btn"],
  button[contact="submit-btn"],
  [contact="form-div"] input[type="submit"]:not([contact="name-submit"]):not([contact="message-submit"]):not([contact="email-submit"]),
  [contact="form-div"] button[type="submit"]:not([contact="name-submit"]):not([contact="message-submit"]):not([contact="email-submit"]) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  @media screen and (max-width: 767px) {
    :root {
      --contact-panel-width: calc(100vw - 2.5rem);
      --contact-panel-height: 35rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --contact-panel-duration: 1ms;
    }

    [contact-container="true"] {
      transition-duration: 1ms !important;
    }
  }