/* Brand Fonts */
@font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueRoman.otf") format("otf"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueLight.otf") format("otf"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueThin.otf") format("otf"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueUltraLight.otf") format("otf"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueMedium.otf") format("otf"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueBold.otf") format("otf"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueHeavy.otf") format("otf"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueBlack.otf") format("otf"); font-weight: 800; font-style: normal; font-display: swap; }

/* Baseline */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Brand Font */
  --font-base: "Helvetica Neue", system-ui, -apple-system, sans-serif;

  /* Brand Colors */
  /* Navy */
  --brand-navy: #001436;
  --brand-navy-darker: #000b1f;
  --brand-navy-200: #142c55;
  --brand-navy-100: #34486c;
  /* Cloud */
  --brand-cloud: #f6f5f2;
  --brand-cloud-200: #dde3ed;
  --brand-cloud-100: #cbd3e0;
  /* Sky */
  --brand-sky: #a1c4ff;
  --brand-sky-200: #7ba3e4;
  --brand-sky-100: #6083be;
  /* Accent */
  --brand-gold: #ffc95d;
  --brand-green: #5cff85;

  /* Semantic Colors */
  /* Backgrounds */
  --color-bg-page: var(--brand-navy);
  --color-bg-surface: var(--brand-navy-200);
  --color-bg-subtle: var(--brand-navy-100);
  --color-bg-inverse: var(--brand-cloud);
  --color-bg-black: black;
  --color-bg-white: white;
  /* Text */
  --color-text-primary: var(--brand-cloud);
  --color-text-secondary: var(--brand-cloud-200);
  --color-text-muted: var(--brand-cloud-100);
  --color-text-inverse: var(--brand-navy);
  /* Actions */
  --color-primary: var(--brand-sky-200);
  --color-primary-hover: var(--brand-sky);
  --color-primary-active: var(--brand-sky-100);
  --color-accent: var(--brand-sky);
  /* Borders */
  --color-border-default: var(--brand-navy-100);
  --color-border-strong: var(--brand-cloud-200);
  /* Grays */
  --color-gray-dark: #444;
  --color-gray-light: #aaa;
  /* Accents */
  --color-accent: var(--brand-gold); 

  /* Logos */
  --logo: url("../content/branding/logo-white.svg");
  --logo-wordmark: url("../content/branding/wordmark-white.svg");
  --logo-stack-horizontal: url("../content/branding/stack-horizontal-white.svg");
  --logo-stack-vertical: url("../content/branding/stack-vertical-white.svg");

  /* Border Radii */
  --border-radius-small: 8px; 
  --border-radius-large: 20px;

  /* Animation */
  --transition-duration-short: 0.25s;
  --transition-duration-long: 0.5s;

  /* Globals */
  --loader-background-color: var(--brand-navy-200);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 18px;
}
::-webkit-scrollbar-track {
  background-color: var(--brand-navy);
}
::-webkit-scrollbar-thumb {
  background-color: var(--brand-gold);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand-gold);
  opacity: 0.8;
}
/* Firefox scrollbar */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--brand-gold) var(--brand-navy);
}

/* Base Elements */
html, body { overscroll-behavior: none; font-size: 16px; }
@media (max-width: 768px) {
  html { font-size: 16px; }
}
@media (min-width: 2048px) {
  html { font-size: 24px; }
}

body { margin: 0; font-family: var(--font-base); line-height: 1.6; background-color: var(--loader-background-color); color: var(--color-text-primary); }
h1,
h2,
h3,
h4 { margin: 0 0 0.75em; font-weight: 700; line-height: 1.2; }

/* Type */
h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: 0.8rem; text-transform: uppercase; font-weight: 500; letter-spacing: 0.25rem; }
h4 { font-size: 0.8rem; text-transform: uppercase; font-weight: 500; letter-spacing: 0.25rem; }
p { margin: 0 0 1.25em; font-size: 1rem; font-weight: 200; color: var(--color-text-secondary); line-height: 3rem; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Type Scales */
.text-muted { color: var(--color-text-muted); }
.text-small { font-size: 0.875rem; }

/* Layout */
.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 2048px) {
  .container { max-width: 2000px; }
}

/* Structural Spacing */
header,
section,
footer {
  padding: 0 0;
}

/* Media */
video { pointer-events: none; }

/* Buttons */
.button { display: inline-block; padding: 0.25rem 3rem; background-color: var(--color-accent); color: var(--color-text-inverse); border: 2px solid var(--color-accent); border-radius: 500px; font-family: var(--font-base); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition-duration: var(--transition-duration-short); }
.button:hover { background-color: transparent; color: var(--color-accent); }
.button:active { background-color: var(--color-primary-active); }

.link-button { padding: 0.25rem 0.5rem; border-radius: 5px; white-space: nowrap; transition-duration: var(--transition-duration-short); cursor: pointer; text-decoration: none; display: flex; flex-direction: row; align-items: center; gap: 0.0.5rem; }
.link-button .icon { width: 1rem; height: 1rem; display: inline-block; background-color: var(--color-gray-light); transition-duration: var(--transition-duration-short); mask-size: contain; mask-position: center center; mask-repeat: no-repeat; mask-image: url('../icons/google-fonts/help_center.svg');  }
.link-button:hover { background-color: var(--color-gray-light); color: var(--color-gray-dark); text-decoration: none; }
.link-button:hover .icon { background-color: var(--color-gray-dark); }

/* Cards */
.card { background-color: var(--color-bg-surface); border: 1px solid var(--color-border-default); padding: 1.5rem; border-radius: 6px; }

/* Overlays */
.vignette { position: absolute; top: 0; left: 0; bottom: 0; right: 0; box-shadow: inset 0 0 50px 10px black; display: none; }

/* Navigation */
nav ul { list-style: none; padding: 0; margin: 0; }
.site-header { background-color: var(--color-bg-page); border-bottom: 1px solid var(--color-border-default); padding: 0; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav .logo { font-weight: 700; font-size: 1.1rem; width: 200px; height: 80%; background-image: url("../content/branding/stack-horizontal-white.svg"); background-size: contain; background-repeat: no-repeat; background-position: center left; }

/* Toggle button (mobile only) */
.nav-toggle { background: none; border: none; color: var(--color-text-primary); font-size: 1.5rem; cursor: pointer; }

/* Nav list (mobile default: hidden) */
.nav-list { display: none; position: absolute; top: 64px; right: 1.5rem; background-color: var(--color-bg-surface); border: 0px solid var(--color-border-default); border-radius: var(--border-radius-small); padding: 1rem; gap: 1rem; list-style: none; }

/* Show menu when open */
.nav-list.open { display: flex; flex-direction: column; }

@media (min-width: 768px) {
  .nav { height: 72px; }
  .nav-toggle { display: none; }
  .nav-list { display: flex; position: static; flex-direction: row; background: none; border: none; padding: 0; gap: 2rem; }
}

/* Forms */
form { display: inline-grid; grid-template-columns: max-content 1fr; gap: 1rem 1.5rem; align-items: center; margin: auto; }
input,
textarea,
select,
button { appearance: none; -webkit-appearance: none; border-radius: 0; background: none; box-sizing: border-box; font: inherit; color: inherit; margin: 0; border: 0; background-color: var(--brand-navy); justify-self: start; width: auto;  border-radius: var(--border-radius-small); padding: 0.5rem;  }
input:focus,
textarea:focus {
  outline: none;
  background-color: var(--brand-sky-100);
  color: var(--brand-cloud);
}
input.invalid,
textarea.invalid {
  border: 1px solid #ff6b6b;
}
label.invalid {
  color: #ff6b6b;
}
form .field { display: contents; }
form .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
form .input-wrapper > input,
form .input-wrapper > textarea {
  flex: 0 0 auto;
}
form .field > .file-input-wrapper,
form .field > .checkbox-group,
form .field > .radio-group {
  position: relative;
}
form label { text-align: right; font-weight: 500; letter-spacing: 0.25rem; text-transform: uppercase; }

/* Join Us (first form) */
.form-join {}
.form-join #join-name-first,
.form-join #join-name-last,
.form-join #join-phone { width: 300px; }
.form-join #join-email { width: 300px; }
.form-join #join-linkedin { width: 500px; }
.form-join #join-aboutyou { width: 500px; height: 300px; resize: none; }
.form-join .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.form-join .checkbox-group-horizontal { flex-direction: row; gap: 1.5rem; }
.form-join .checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; text-align: left; font-weight: 300; font-size: 0.8rem; letter-spacing: normal; text-transform: none; color: var(--brand-sky-100); }
.form-join input[type='checkbox'] { width: 24px; height: 24px; border: 2px solid var(--brand-navy-100); border-radius: var(--border-radius-small); cursor: pointer; position: relative; background-color: var(--brand-navy); }
.form-join input[type='checkbox']::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background:
    linear-gradient(45deg, transparent 40%, var(--brand-navy-100) 40%, var(--brand-navy-100) 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--brand-navy-100) 40%, var(--brand-navy-100) 60%, transparent 60%); }
.form-join input[type='checkbox']:checked { background-color: var(--brand-sky); }
.form-join input[type='checkbox']:checked::before { display: none; }
.form-join input[type='checkbox']:checked::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 5px; height: 11px; border: solid black; border-width: 0 2px 2px 0; }
.form-join input[type='checkbox']:checked + span { color: white; }


/* Radio buttons */
.form-join .radio-group { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.form-join .radio-group-horizontal { flex-direction: row; gap: 1.5rem; }
.form-join .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; text-align: left; font-weight: 300; font-size: 0.8rem; letter-spacing: normal; text-transform: none; color: var(--brand-sky-100); }
.form-join input[type='radio'] { width: 24px; height: 24px; border: 2px solid var(--brand-navy-100); border-radius: var(--border-radius-small); cursor: pointer; position: relative; background-color: var(--brand-navy); }
.form-join input[type='radio']:checked { background-color: var(--brand-sky); }
.form-join input[type='radio']:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: black;
}
.form-join input[type='radio']:checked + span { color: white; }
.form-join .file-input-wrapper { display: flex; align-items: center; gap: 1rem; }
.form-join input[type='file'] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.form-join .file-input-button { display: inline-block; padding: 0.5rem 1.5rem; background-color: var(--brand-navy); color: white; border-radius: var(--border-radius-small); cursor: pointer; font-weight: 500; text-transform: none; letter-spacing: normal; transition: background-color 0.2s ease; }
.form-join .file-input-button:hover { background-color: var(--brand-sky-200); }
.form-join .file-input-filename { color: var(--brand-cloud-200); font-size: 0.8rem; font-weight: 300; }
.form-join input[type='submit'] { grid-column: 1 / -1; justify-self: center; margin-top: 1rem; }
.form-join .input-wrapper { display: contents; }
.form-join .field-error { grid-column: 1 / -1; color: #ff6b6b; font-size: 0.8rem; font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.2; pointer-events: none; margin-top: 0.25rem; margin-bottom: 0.5rem; }

/* Mobile responsiveness for forms */
@media (max-width: 1100px) {
  form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
  }
  form label {
    text-align: left;
    margin-bottom: 0.25rem;
    font-size: 0.67rem;
  }
  .form-join .field {
    margin-bottom: 1.5rem;
  }
  .form-join #join-name-first,
  .form-join #join-name-last,
  .form-join #join-phone,
  .form-join #join-email {
    width: 100%;
  }
  .form-join #join-linkedin,
  .form-join #join-aboutyou {
    width: 100%;
  }
  .form-join .checkbox-group-horizontal {
    flex-direction: column;
  }
  .form-join .radio-group-horizontal {
    flex-direction: column;
  }
}


/* Loading Screen */
.loader { position: fixed; left: 0; right: 0; height: 100vh; height: 100dvh; background-color: var(--loader-background-color); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3rem; }
.loader-logo-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.loader-logo { transform: translateY(26.6667%); width: 500px; aspect-ratio: 1600 / 951; background-color: var(--brand-sky); mask-image: var(--logo-stack-vertical); mask-size: contain; mask-position: center center; mask-repeat: no-repeat; opacity: 0; }
.loader-icon { width: 300px; aspect-ratio: 16/9; mask-image: url('/assets/internal/icons/loader.svg'); mask-size: contain; mask-position: center center; mask-repeat: no-repeat; background-color: var(--brand-cloud-100); display: none; }
.loader-bar { --loader-border-radius: 3rem; position: absolute; width: 500px; height: 24px; border-radius: var(--loader-border-radius); background-color: rgba(255,255,255,0.05); overflow: hidden; opacity: 0; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 250px)); }
.loader-bar-fill { position: absolute; left: 0px; width: 0%; height: 100%; border-radius: var(--loader-border-radius); background-color: var(--brand-sky-100); }
.loader-bar-text { position: absolute; top: 50%; left: 50%; width: calc(100% - 1rem); transform: translate(-50%, -50%); color: var(--brand-sky); font-size: 12px; text-transform: uppercase; font-weight: 500; display: flex; flex-direction: row; align-items: center; }
.loader-bar-text :first-child { flex: 1 1 0; }
.loader-bar-text-percentage { flex: 0 0 auto; }
@media (max-width: 768px) or (max-height: 576px) { 
  .loader-logo { width: 280px; }
  .loader-bar { width: 280px; transform: translate(-50%, calc(-50% + 150px)); }
}

/* Footer */
.footer { padding: 2rem 0; background-color: var(--color-gray-dark); color: var(--color-gray-light); font-size: 0.75rem; }
.footer-container { display: flex; flex-direction: row; align-items: center; }
.footer-container > * { flex: 1 1 auto; }
.footer-logo { align-self: flex-start; }
.footer-logo > div { display: inline-block; height: 64px; aspect-ratio: 16/9; background-color: var(--color-gray-light); mask-image: var(--logo-wordmark); mask-position: center center; mask-repeat: no-repeat; }
.footer-info { display: flex; flex-direction: column; align-items: flex-start; }
.footer-info-call .icon { mask-image: url('../icons/google-fonts/call.svg'); }
.footer-info-mail .icon { mask-image: url('../icons/google-fonts/mail.svg'); }
.footer-info-location .icon { mask-image: url('../icons/google-fonts/location_city.svg'); }
.footer-legal { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.footer-copy { text-align: right; vertical-align: middle; white-space: nowrap; align-self: center;}
.footer-copy-logo { background-color: var(--color-gray-light); mask-image: var(--logo-wordmark); mask-position: center center; mask-size: contain; mask-repeat: no-repeat; aspect-ratio: 16/4; transform: translateY(5px); height: 16px; display: inline-block; }
@media (max-width: 1100px) { 
  .footer-container { flex-direction: column; align-items: stretch; }
  .footer-info { flex-direction: column; }
  .footer-copy { align-self: flex-end; }
}

/* Splash */
.splash { position: relative; height: 100dvh; margin: 0; padding: 0; }
.splash-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.splash-logo { width: 500px; aspect-ratio: 1600 / 951; background-color: var(--color-text-primary); mask-image: var(--logo-stack-vertical); mask-size: contain; mask-position: center center; mask-repeat: no-repeat; transform: translateY(26.6667%); }
.splash-scroll { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1rem; display: flex; flex-direction: column; align-items: center; opacity: 0; }
.splash-scroll > * { mask-size: contain; mask-position: center center; mask-repeat: no-repeat; background-color: var(--color-text-muted); }
.splash-scroll-mouse { width: 2rem; height: 2rem; mask-image: url('../icons/google-fonts/mouse.svg'); }
.splash-scroll-arrow { width: 1.5rem; height: 1.5rem; mask-image: url('../icons/google-fonts/keyboard_double_arrow_down.svg'); margin-top: -1px; }
.splash-background-black { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -4; background-color: black; }
.splash-background-color { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -2; background-color: var(--color-bg-page); }
.splash-background-color-grid { position: absolute; inset: 0; display: flex; flex-wrap: wrap; z-index: -2; width: 100%; height: 100dvh; }
.splash-background-color-grid > div { flex: 0 0 calc(100% / 3); height: calc(100% / 3); }
.splash-background-color-grid > div > div { width: 100%; height: 100%; background-color: var(--brand-navy); }
.splash-background-canvas { position: absolute; inset: 0; z-index: -2; }
#splash-reveal-cutout { width: 100%; height: 100%; pointer-events: none; }
.splash-background-media { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -3; opacity: 0.75; overflow: hidden; }
.splash-background-media video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); }
@media (max-width: 768px) or (max-height: 576px) { 
  .splash-logo { width: 280px; }
}
/* Densify Animation */
.splash-densify { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; z-index: -1; }
.splash-densify-container { position: relative; width: 100%; height: 100%; }
#densify-fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
#densify-doc-layer { position: absolute; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.densify-grid { position: absolute; width: 100%; height: 100%; }
.densify-slot { position: absolute; width: 95px; height: 95px; background-color: #fff; transform: translate(-50%, -50%); border-radius: 10px; }

/* Mission */
.mission { position: relative; }
.mission-floating-background-color { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -2; background-color: var(--color-bg-black); }
.mission-floating-content-masking { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; backdrop-filter: blur(40px); z-index: -1; box-shadow: 0 0 20px 0 rgba(0,0,0,0.8); }
.mission-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; }
.mission-background video { position: absolute; inset: 0; width: 3840px; height: 2160px; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
@media (max-width: 2048px) {
  .mission-background video { height: 100%; width: auto; }
}
@media (min-width: 3841px) {
  .mission-background video { height: 100%; width: auto; }
}
.mission-content-area { width: 50%; padding: 3rem 3rem; }
.mission-content-area p { font-size: 1.2rem; max-width: 60ch; margin-left: auto; }
.mission-content-area .final-statement { display: flex; flex-direction: row; gap: 0.5rem; }
.mission-content-area .final-statement .logo { width: 100px; aspect-ratio: 16/9; mask-image: var(--logo-wordmark); mask-position: center center; mask-size: contain; mask-repeat: no-repeat; background-color: #fff; }
.mission-content-area .final-statement p { margin: 0; }
@media (max-width: 1100px) { 
  .mission { padding-top: 3rem; }
  .mission-background { position: relative; width: calc(100% - 6rem); margin: auto; height: 576px; border-radius: var(--border-radius-large); }
  .mission-background video { width: 200%; height: auto; left: auto; top: 50%; right: -15%; bottom: auto; position: absolute; transform: translateY(-50%);  }
  .mission-floating-content-masking { display: none; }
  .mission-content-area { width: 100%; margin: auto; }
  .mission-content-area p { margin-left: auto; max-width: none; }
}
@media (max-width: 576px) {
  .mission-background { height: 300px; }
}

/* Work With Us */
.work-with-us { background-color: #00091a; color: var(--color-text-muted); padding: 3rem 0; }
.work-with-us h3 { color: var(--color-accent); }
.work-with-us p { margin: 0 3rem; }
.work-with-us-container { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.principles { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.principle { flex: 0 0 1; }
.principle h4 { background-color: var(--brand-navy); padding: 1rem; text-transform: uppercase;  margin: 0; border-top-left-radius: var(--border-radius-small); border-top-right-radius: var(--border-radius-small); border-radius: var(--border-radius-small); }
.principle > div { background-color: var(--brand-navy); text-align: left; padding: 1rem 2rem; border-bottom-left-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); aspect-ratio: 2/1; overflow: hidden; text-overflow: ellipsis; display: none;  }
.principle p { margin: 0; }
ul.work-experience { list-style-type: none; padding: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; flex-wrap: wrap; gap: 2px; width: 100%; }
ul.work-experience li { flex: 0 0 calc(25% - 2px); height: 100px; border-radius: var(--border-radius-small); background-color: var(--brand-navy); display: flex; align-items: center; justify-content: center; }
ul.work-experience li > *  {mask-position: center center; mask-size: 65%; mask-repeat: no-repeat; background-color: var(--brand-cloud-100); width: 80%; height: 100%; display: inline-block;  }
.work-experience .apple { mask-image: url('../content/companies/apple.svg'); }
.work-experience .nvidia { mask-image: url('../content/companies/nvidia.svg'); }
.work-experience .google { mask-image: url('../content/companies/google.svg'); }
.work-experience .spacex { mask-image: url('../content/companies/spacex.svg'); }
.work-experience .tesla { mask-image: url('../content/companies/tesla.svg'); }
.work-experience .amd { mask-image: url('../content/companies/amd.svg'); }
.work-experience .intel { mask-image: url('../content/companies/intel.svg'); mask-size: 52%; }
.work-experience .amazon { mask-image: url('../content/companies/amazon.svg'); }
.work-experience .microsoft { mask-image: url('../content/companies/microsoft.svg'); }
.work-experience .qualcomm { mask-image: url('../content/companies/qualcomm.svg'); }
@media (max-width: 768px) { 
  .work-with-us p { margin: 0; }
  .principle { flex: 0 0 100%; }
  ul.work-experience { flex-wrap: wrap; gap: 1px; }
  ul.work-experience li { flex: 0 0 calc(50% - 2px); }
  ul.work-experience li > * {}
}
@media (min-width: 2048px) {
  ul.work-experience li { height: 200px; }
}
/*  OUR PRINCIPLES DEPRECATED FOR STATIC CARDS
.our-principles { list-style-type: none; padding: 0; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.principle h3 { background-color: var(--brand-navy); margin: 0; padding: 1rem 3rem; border-radius: var(--border-radius-small);  transition-duration: var(--transition-duration-long); cursor: pointer; color: var(--brand-cloud); }
.principle h3:hover { background-color: var(--brand-cloud); color: var(--brand-navy); }
.principle:has(> div.is-open) h3 { color: var(--brand-sky); }
*/
/* Accordion Icons Deprecated
.principle h3:before,
.principle h3:after { content: ""; padding: 16px; background-color: var(--brand-sky); mask-image: url('../icons/google-fonts/arrow_drop_down.svg'); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; margin-top: -0.5rem; float: left; transition-duration: var(--transition-duration-short); opacity: 0; }
.principle h3:after { float: right; }
.principle:has(> div.is-open) h3:before,
.principle:has(> div.is-open) h3:after { opacity: 1; }
*/
/*
.principle > div { height: 0px; overflow: hidden; background-color: rgba(0,0,0,0.25); color: var(--color-text-muted); }
.principle p { text-align: center; margin: 0; padding: 0.5rem 2rem; line-height: 2rem; }
.principle p:first-child { padding-top: 2rem; }
.principle p:last-child { padding-bottom: 2rem; }
*/

/** DESIGN REVIEW ONLY **/
/*
#design-review { position: fixed; bottom: 1rem; left: 1rem; padding: 0.25rem; border: 0px solid var(--color-gray-light); background-color: rgba(0,0,0,0.5); color: var(--color-gray-light); border-radius: var(--border-radius-small); z-index: 1000; display: flex; flex-direction: row; gap: 0.25rem; align-items: center; backdrop-filter: blur(5px); font-size: 0.75rem; }
#design-review.collapsed .toggle { display: none; }
#design-review.collapsed #dr-toggle::before { content: "\2630" }
#design-review.expanded #dr-toggle::before { content: "\25c0" }
#design-review .toggle.enabled { color: rgb(128, 255, 0); }
#design-review .toggle.disabled { color: rgba(255,64,0); }
*/